Skip to content

Tailwind CSS

January 9, 2025
September 1, 2023

Rapidly build modern websites without ever leaving your HTML

functional/atomic CSS

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
tailwindlabs/tailwindcss: A utility-first CSS framework for rapid UI development.
tailwindlabs/tailwindcss-typography

Tailwind CSS - A Utility-First CSS Framework for Rapid UI Development
Handling Hover, Focus, and Other States - Tailwind CSS

Responsive Design - Tailwind CSS
Tailwindcss breakpoint inspector, initial idea from https://gist.github.com/jonsugar/6bce22bd7d3673294caad36046c2b7cb Β· GitHub

<script src="https://cdn.tailwindcss.com"></script>

Open-sourcing our progress on Tailwind CSS v4.0 - Tailwind CSS
Tailwind V4 Is Bigger Than Expected πŸ‘€ - YouTube
Uses Lightning CSS (Rust compiler and bundler)

Framework Guides - Tailwind CSS
Tailwind CSS v3.3: Extended color palette, ESM/TS support, logical properties, and more - Tailwind CSS
Tailwind CSS Tutorial for Beginners – How To Start?
Tailwind CSS Tips and Tricks Worth Knowing
10 Tailwind Classes I Wish I Knew Earlier - YouTube

Tailwind Labs - YouTube
Tailwind CSS is the worst… - YouTube
Ultimate Tailwind CSS Tutorial // Build a Discord-inspired Animated Navbar - YouTube old way, JIT and purge

Tailwind CSS Cheat Sheet
Tailwind CSS Cheat Sheet
Watching Tailwind Tutorials Is A Waste Of Time - YouTube use cheatsheet

Automatic Class Sorting with Prettier - Tailwind CSS
tailwindlabs/prettier-plugin-tailwindcss: A Prettier plugin for Tailwind CSS that automatically sorts classes based on our recommended class order.
Tailwind class sorter - Visual Studio Marketplace language agnostic

Customization

Configuration - Tailwind CSS
Functions & Directives - Tailwind CSS

How the PROS Use Tailwind - YouTube replace rather than extend

PostCSS 8 Β· Issue #9664 Β· facebook/create-react-app But CRA does not support PostCSS 8, which is required by Tailwind 2.0
Installation - Tailwind CSS

partydeck/game at main Β· itays123/partydeck CRA+craco example

On the contrary

The Tailwind Conspiracy | Theo Reacts - YouTube attack on Tailwind (component-based development actually) and Theo's defense

Thoughts on Tailwind 4 v4 features breaks "atomicity"
This new Tailwind feature is scarier than I thought - YouTube

Ecosystem

vimeshjs/vimesh-style: Vimesh Style is a full-featured tiny javascript library alternative to Tailwind CSS. Automatically work with any frontend frameworks, including React, Vue, AngularJS ect.

dcastil/tailwind-merge: Merge Tailwind CSS classes without style conflicts
Tailwind-Merge Is Incredibly Useful β€” And Here's Why! - YouTube
cn() - Every Tailwind Coder Needs It (clsx + twMerge) - YouTube

Typewind – Typesafe Tailwind

Twind.style
Home | Twind runtime compiler
tw-in-js/twind: The smallest, fastest, most feature complete Tailwind-in-JS solution in existence.

Component Libraries

Utility-first CSS - You have to try it first! - DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»
Utility-First CSS With Tailwind - DZone Web Dev
Functional CSS: Meet Tailwind CSS - Better Programming - Medium

Tailwind CSS tips for creating reusable React components - LogRocket Blog
Building Reusable React Components Using Tailwind β€” Smashing Magazine

UI kits

usually as Tailwind plugin

daisyUI β€” Tailwind CSS Components
Building React components with DaisyUI
I Found the Perfect Component Library - YouTube

Versoly UI - Tailwind CSS Components

The best Tailwind templates & UI kits on the internet | Tailwind Awesome

Flowbite

multiple frameworks

Flowbite - Build websites even faster with components on top of Tailwind CSS
Flowbite - Plugins and Resources for Tailwind CSS
themesberg/flowbite: The most popular and open-source library of Tailwind CSS components

Flowbite React - UI Component Library
themesberg/flowbite-react: Official React components built for Flowbite and Tailwind CSS

UI kits (Copy and paste)

Explore 3000+ Free UI Elements: CSS & Tailwind Tailwind or pure CSS
Tailwind CSS Component Library | WindUI
Tailwind CSS Components. Examples and templates
Home | Collection of Tailwindcss Templates & Components
Tailwind Toolbox - Free Starter Templates and Components for Tailwind CSS
Tailwind Layouts
Myna UI
Tailblocks β€” Ready-to-use Tailwind CSS blocks

shadcn/ui

Radix headless UI + Tailwind CSS
css-tailwindcss#v0

shadcn/ui - Beautifully designed components built with Radix UI and Tailwind CSS.
shadcn/ui: Beautifully designed components built with Radix UI and Tailwind CSS.

The anatomy of shadcn/ui
Breaking Down The Most Hyped Component Library - YouTube

This might change how we build UI forever - YouTube npx shadcn init
new CLI that updates instead of replacing your files, you can see the diff

Best UI kit for Next.js 13 | shadcn ui tutorial - YouTube
Let's Build a Component Library Using Shadcn's UI Components - YouTube
The Best UI Components that EVERYONE is Using! - YouTube 54:05

Aceternity

Framer Motion + Tailwind CSS

Aceternity UI
Components - Aceternity UI

This UI component library is mind-blowing - YouTube

v0

UI generation with prompt
generates shadcn/ui and Tailwind CSS code, v0 CLI to install the components

v0.dev by Vercel
v0.dev - WOW!! This IS WILD - YouTube