Tailwind CSS ​

Tailwind UI, Meraki UI & TailwindCSS Radix have nice components. UI Devtools is useful tool. Together with Typewind.

UnoCSS is a nice alternative.

I personally enjoy using styled components pattern more than inline class name styles as it's easier to read and I like the composition of DOM elements with nice names.

I always value readability and extendability over being able to write/edit things fast. With styled components pattern with some inline styles be it with Tailwind or otherwise, I find I get the best of both worlds.

Notes ​

• You can get all the Tailwind JIT goodness you like just by adding a single script tag to the head of your document.
• Tailwind is best used in incremental steps: 1. Flesh out the UI first. 2. Notice the emerging CSS class usage patterns. 3. Abstract components out. Last step involves pulling all classes into an actual CSS file.
• The key to TailwindCSS is to avoid putting too many classes in one string. Just use classnames to merge them for you.

Links ​

• Awesome Tailwind CSS
• Typed Tailwind - Brings types to TailwindCSS via TypeScript.
• Tailwind with React (2020)
• Introduction to Tailwind and the Utility first workflow
• tailwindcss-classnames - Functional typed classnames for TailwindCSS. (Video)
• Twin - Use Tailwind classes within any CSS-in-JS library. (HN)
• react-native-tailwindcss - React-native style system based on TailwindCSS.
• tailwind-rn - Use Tailwind CSS in React Native projects.
• Headwind - Opinionated Tailwind CSS class sorter for Visual Studio Code.
• Tailwind Colors - Tailwind CSS color configration tool. (Code)
• Tailwind Starter Kit - Beautiful extension for TailwindCSS. (Code)
• Figma Kit for TailwindCSS (Code)
• React Native Tailwind - Functional CSS classes for React Native.
• TailwindCSS Figma Plugin
• TailBlocks - Ready-to-use Tailwind CSS blocks. (Code)
• Tailwind CSS Dark Mode - Tailwind CSS plugin that adds variants for dark mode.
• The origin story of Tailwind (2020) (HN)
• Tailwind Gradient Designer (Code)
• Tailwind Ink - AI color palette generator for TailwindCSS. (HN) (Code)
• Tailwind Studio
• Beginner Tailwind - Make good looking designs quickly. All without a single line of custom CSS. (Intro)
• Tailwind UI React extension
• Headless UI - Unstyled, fully accessible UI components. (Code) (Article)
• Kitwind - Marketplace of fully responsive, multi-purpose UI kits, built with Tailwind CSS.
• Kometa UI Kit - Over 130 sections, built with TailwindCSS.
• Tailwind CSS Resources you wish you had (2020)
• Statik UI - Modern UI kit based on Tailwind CSS.
• Why Tailwind CSS (2020) (Tweet)
• Tailwind Play - Official Tailwind CSS playground. (Intro article) (Code) (HN)
• Sidewind - Tailwind but for state. (Docs)
• Tailwind CSS Custom Forms - Better base for styling form elements with Tailwind CSS.
• Tailwind UI CSS Components - Collection of professionally designed, pre-built, fully responsive HTML snippets you can drop into your Tailwind projects.
• Tailwindo - Convert Bootstrap CSS code to Tailwind CSS code.
• Setup Emotion to use Tailwind classes in Next.js (2020)
• Oceanwind - Compiles tailwind shorthand into css at runtime.
• Prettier Plugin Tailwind - Sort tailwind classes in HTML with Prettier.
• UI Devtools for Tailwind CSS
• Tailwind versus BEM (2020)
• TailwindCSS v2.0 (2020) (HN)
• tailwindcssinjs - Packages for using Tailwind CSS with CSS-in-JS.
• emotion-tailwind-preflight - Merge the shiny TailwindCSS base styles into your CSS-in-JS project.
• Tailwind Builder - Create Tailwind templates in minutes.
• Tailwind Classes Sorter - Sort tailwind classes in order of default plugins.
• I Love Tailwind (2020) (HN)
• Windy - Transform every element on any website to Tailwind CSS.
• Tailwind Config Viewer - Local UI tool for visualizing your Tailwind CSS configuration file.
• tailwindcss/typography - Plugin that provides a set of prose classes you can use to add beautiful typographic defaults to any vanilla HTML you don't control.
• Beamwind - Collection of packages to compile Tailwind CSS like shorthand syntax into CSS at runtime.
• Twind - Smallest, fastest, most feature complete Tailwind-in-JS solution in existence. (Web)
• Twind CLI
• Blog – Tailwind CSS (Code)
• Tailwind UI Kit - Beautiful and large components kit for TailwindCSS. (Code)
• Tailwind Tools - Tailwind CSS Tools For Developers.
• RustyWind - CLI for organizing Tailwind CSS classes.
• Tails - TailwindCSS Page Creator.
• TailwindCSS Buttons - Unique collection of Copy & Paste TailwindCSS buttons.
• Tailwind CSS for Rails - Makes it easy to use this CSS framework with the asset pipeline.
• tailwindcss/forms - Plugin that provides a basic reset for form styles that makes form elements easy to override with utilities. (Web)
• DaisyUI - Tailwind CSS Components. (Code) (HN)
• Tailwind Color Shades Generator (Code)
• Wicked Blocks - Tailwind Blocks ready to copy-paste. (HN)
• Why Tailwind Isn't for Me (2021)
• Universal Tokens for Tailwind - Use Tailwind tokens as CSS variables, SASS map, SASS variables, ES module, JSON & Common JS module. (Code)
• windicss - Next generation tailwindcss compiler.
• Windi CSS for Vite - On-demand TailwindCSS.
• Windi CSS - Next generation Tailwind CSS compiler. (Docs) (Docs Code)
• Windi Analysis - Visual analyzer for Windi CSS. (Web)
• updrafts.app - Design & Prototype with Tailwind CSS.
• Tailwindize - Convert any color into a Tailwind one.
• Nightwind - Automatic, customizable, overridable Tailwind dark mode plugin. (Web)
• Why I Don't Like Tailwind CSS (2021) (Lobsters)
• Tailwind CSS JIT - Just-in-time compiler for Tailwind CSS.
• Tailwind CSS JIT + Rails without Webpacker
• From semantic CSS to Tailwind - Refactoring the Netlify UI codebase (2021)
• Kimia-UI - Collection of UI Components for React built with Tailwind CSS. (Code)
• Tailwind-Styled-Component - Create Tailwind CSS React components like styled components with class names on multiple lines and conditional class rendering.
• Tailwind UI: Now with React + Vue support (2021) (Tweet)
• Building React + Vue support for Tailwind UI (2021) (HN)
• Using Tailwind CSS's Headless UI for React (2021)
• tailbuild - Simple command to build a Tailwind CSS file for your project (with JIT compiling and watching).
• Tailwind JIT as a CDN - Use the full power of Tailwind CSS' new JIT compiler by including one script tag to your HTML. (Demo)
• Tailwind Mobile - Mobile UI components made with Tailwind CSS. (Web)
• Sexism, Racism, Toxic Positivity, and TailwindCSS (2021)
• Moving From Tailwind To CSS Variables (2021)
• TailwindCSS Stimulus Components - Set of StimulusJS components for TailwindCSS apps similar to Bootstrap JS components.
• eslint-plugin-tailwindcss - ESLint plugin for Tailwind CSS usage.
• Best way to structure your classes and markup when building UIs with Tailwind CSS (2021)
• tailwindcss/aspect-ratio - Plugin that provides a composable API for giving elements a fixed aspect ratio.
• Tailwind CSS Tutorial for Beginners (2020)
• TailwindCSS Converter - Convert CSS To Tailwind. (Code)
• Coming to Terms with Tailwind (2021) (HN)
• tailwindcss-capsize - Tailwind CSS utility classes for trimming whitespace above & below capital letters.
• tailwind-merge - Utility function to efficiently merge Tailwind CSS classes in JS without style conflicts.
• Destack - Build landing pages visually right in your Next.js project. Deploy them zero further configuration. (Code)
• Most well-known sites you know of that use Tailwind CSS? (2021)
• Tailory - Customize your website with rare, unique Tailwind components that are guaranteed to be different from the crowd. (Twitter)
• Wicked Blocks - Ready Made Tailwind CSS blocks, for your next project.
• Tailwind class madness. Never again. (2021)
• Discord-Inspired Dashboard with Tailwind CSS
• Goodbye CSS Modules, Hello TailwindCSS (HN)
• artis3n.tailscale - Ansible role to install and enable a Tailscale node.
• Create a Responsive Navbar using React and Tailwind (2021)
• You don't need SVG! Creating animated loaders for content with Tailwind CSS (2021)
• People creating awesome Tailwind content (2021)
• TailwindCSS Radix - Utilities and variants for styling Radix state. (Code)
• Tailwind TS Generator - Generate Tailwind type from your own configuration.
• Tailwind CSS v3.0 (2021) (HN) (Tweet)
• What's new in Tailwind CSS v3.0? (2021)
• tailwindui-crawler - Will crawl the tailwindui.com website and download all the components to the ./output folder.
• Effortless typography, even in dark mode — Tailwind CSS Typography v0.5 (2021)
• Rebuilding iOS 15 with Tailwind CSS (2021)
• Animate CSS - Tailwind CSS Plugin
• Box Shadows for TailwindCSS
• Palette Generator and API for Tailwind CSS (Code) (Article)
• HyperUI - Open Source Tailwind CSS Components. (Code) (HN)
• TailwindCSS Animation Snippets (Code)
• TailwindCSS Dash Docset
• I used Tailwind for the U in CUBE CSS and I liked it (2022)
• Flowrift - Beautifully designed Tailwind CSS UI blocks - view / copy / customize. (Code)
• Tailwind CSS the Right Way
• tailwindcss-animate - Tailwind CSS plugin for creating beautiful animations.
• TailwindCSS Prettier Plugin
• Alpine.js and Tailwind HTML setup (2022)
• twd - Simple tailwind like CLI tool for deno.
• Tailwind CSS Nested Groups plugin - Adds support nested groups to the group variant for any level deep by scoping them.
• Tailwind CSS Theming - Tailwind CSS plugin for client-side theming using CSS variables, with dark mode support.
• Tailwind CSS - CLI tool that takes a CSS generated by TailwindCSS and generates Rust code with all available class names and modifiers.
• tailwindcss-constants - Apply TailwindCSS utilities only if they match a constant.
• Meraki UI Tailwind CSS Components - Tailwind CSS components that support RTL languages & fully responsive based on Flexbox & CSS Grid with elegant Dark Mode. (Code)
• Tailwind Labeled Groups - Plugin that allows to create multiple groups utilities such as group-card or group-1 and works with Tailwind 3 features and all variations.
• Tailwind Admin Template - Admin dashboard template built with Tailwind and Alpine.js.
• Lemon Design - React component library based on Tailwind CSS.
• Tailwind CSS Logical - CSS Logical Properties and Values plugin for Tailwind CSS.
• Tailwind CSS Plugin Starter - Boilerplate for Tailwind CSS plugins.
• Tailwind CSS OpenType - Tailwind CSS utility classes for advanced typographic features.
• Xtend UI - Custom UI made easy with simplicity and total freedom. (Code)
• Windy Radix Palette - Tailwind preset for bringing Radix Colors palette to Tailwind.
• Tailwind Components Collection
• Tailwind Utopia - TailwindCSS plugin to generate interpolated fluid typographic and spacing scales as created by the generator utopia.fyi.
• Tailwind CSS Assistant - Tailwind CSS assistant allowing you to edit classes.
• tailwind-converter - Convert TailwindCSS classes to a single CSS class.
• TailwindCSS Themer - Unopinionated, scalable, TailwindCSS theming solution.
• Tailwind Color Picker - Chrome extension color picker for Tailwind.
• TailwindFormatter - Formats tailwind classes within elixir projects.
• Tailwind Init (twinit) - Setup TailwindCSS on your project with one command.
• Automatic Class Sorting with Prettier – Tailwind CSS (2022)
• Tailwind Components - Responsive Cards (Code)
• Impulse - Impossible Dev Tools for React and Tailwind. (Code)
• Example Showcase - Tailwind CSS
• Preline UI - Open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework. (Code)
• Tailwind CSS v3.2: revisiting my “feature creep” warning (2022) (HN)
• TailwindCSS-Fluid-Type - Plugin that makes the use of Fluid Type a breeze.
• TailwindCSS Container Queries
• Tru Narla: Building a design system in Next.js with Tailwind (2022)
• JIT Browser TailwindCSS
• Tailwind Components Gradient Generator
• TailwindCSS Radix UI - Style Radix UI components with TailwindCSS.
• Advanced TypeScript: The ultimate Tailwind typings (2022)
• Railwind - Tailwind compiler rewritten in rust.
• TwClassed - Make your Tailwind components re-usable. (Code)
• Tailscan - Browser inspector for TailwindCSS.
• What working with Tailwind CSS every day for 2 years looks like (2022) (HN)
• Tailwind is a Leaky Abstraction (2022)
• Easy Tailwind - Easier way of writing Tailwind classes.
• Tailwind Current Hue Plugin
• RippleUI - TailwindCSS Components. (Code)
• Sailboat UI - Modern UI framework for Tailwind CSS. (HN) (Code)
• stailwc - Tailwind in SWC, fast.
• Don't use Tailwind for your Design System (2021) (HN)
• Tailwind Tagged - Way to use tailwind by writing standard CSS.
• tw variants - Tailwind variant grouping without increasing CSS size.
• Typewind - Safety of Typescript with the magic of Tailwind. (Tweet)
• Tailwind Radix Colors - Bring Radix UI's color system to Tailwind CSS.
• tw-to-css - Transform Tailwind classes to pure CSS.
• Tailwind Mistakes You're Probably Making (2023)
• tailwind-variants - Power of Tailwind combined with a first-class variant API.
• Tailwind Pseudo Elements - TailwindCSS Plugin that adds variants of pseudo elements.
• Tailwind Color Picker Raycast - Simple color picker for Tailwind CSS and Radix UI color palettes.
• TailwindCSS Icons - Use any icon from Iconify.
• I used Tailwind for the U in CUBE CSS and I liked it (2022)
• Konsta UI - Mobile UI components made with Tailwind CSS. (Web) (HN)
• Tailwind CSS v3.3 (2023) (HN) (Tweet)
• Find the nearest Tailwind Color
• Tailwind CSS Color Generator - UI Examples & WCAG Contrast Ratios.
• tailwindcss-shadow-fill - TailwindCSS utility to override background fill color using shadow.
• tw-colors - Tailwind color themes made easy.
• TailwindCSS vs. UnoCSS (2023)
• Unique collection of modern UI components and effectsG (Code)
• SwiftyTailwind - Swift Package to pull and run Tailwind from a Swift process.
• Tailwind Connect 2023 — Keynote - YouTube
• Pines - Alpine and Tailwind UI Library. (Code) (HN)
• LangUI - UI for your AI. Open Source Tailwind components tailored for your GPT, generative AI, and LLM projects. (Code)
• CSS To Tailwind - Convert CSS code to Tailwind syntax in real time.
• Float UI - Free open source Tailwind UI components & Templates. (Code)
• Why Tailwind CSS Won (2023) (HN)
• Tailwind CSS Variables - Easily create CSS variables without the need for CSS file.
• Tailspark - 250+ Free TailwindCSS Components.