tailwind-css.md

title
Tailwind CSS

Tailwind CSS

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

UnoCSS is a nice alternative.

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)
• 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