Your first time on this page? Allow me to give some explanations.
Awesome Tailwind CSS
A curated list of awesome things related to Tailwind CSS
Here you can see meta information about this topic like the time we last updated this page, the original creator of the awesome list and a link to the original GitHub repository.
Thank you aniftyco & contributors
View Topic on GitHub:
aniftyco/awesome-tailwindcss
Search for resources by name or description.
Simply type in what you are looking for and the results will be filtered on the fly.
Further filter the resources on this page by type (repository/other resource), number of stars on GitHub and time of last commit in months.
Useful Links
A utility-first CSS framework for rapid UI development.
Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
Community-driven collection of awesome websites built with Tailwind CSS.
IDE Extensions
An opinionated Tailwind CSS class sorter built for Visual Studio Code
Tailwind CSS color palette generator
tailwindcss class name completion for (neo)vim
IntelliSense extension for Visual Studio Code.
Snippet extension for Visual Studio Code.
Plugins
Tailwind CSS plugin for client-side theming using CSS variables, with dark mode support
Media-query- or JavaScript-based theme variants with fallback for Tailwind CSS
🎨 The easiest way to create themes with Tailwind CSS.
A helper for getting tailwind values into css custom properties and switching them between media queries and classes. A quick example can be found here: https://tailwindcss-theme-swapper.crswll.now.sh/
Tailwind CSS plugin that adds variants for @media (prefers-color-scheme: dark) or using an activator CSS class
Tailwind CSS plugin that adds variants for DarkMode
🌚 A Tailwind CSS plugin that adds variants for dark mode
Tailwind CSS plugin to generate gap utilities
Aspect Ratio Plugin for tailwindcss framework
Tailwind CSS plugin that lets you write your configuration file with your own custom utilities as though they were native to the framework
Adds CSS Scroll Snap utilities to Tailwind CSS.
A TailwindCSS plugin for creating shadow outline with multiple colors
Text-indent utilities for Tailwind CSS.
Image-rendering utilities for Tailwind CSS.
Tailwind CSS plugin to generate filter and backdrop filter utilities
Tailwind CSS plugin for Material Components elevation classes
TailwindCSS plugin to color caret in input fields.
Blend-mode utilities for Tailwind CSS.
writing mode utilities for tailwindcss
Tailwind CSS plugin to generate border image gradient utilities.
This is a Tailwind CSS plugin to generate utility classes for RFS
Re-adds the list-reset utility that was removed prior to Tailwind 1.0.0.
Fluid utilities for Tailwind CSS
Tailwind CSS plugin to generate typography utilities and text style components
CSS :after triangle plugin for tailwindcss framework
Configurable Tailwind plugin for generating scrim classes.
Tailwind CSS plugin to generate truncate multiline utilities
Generate classnames for CSS Logical Properties for margin, padding, border-width, border-raduis, text-align, float & writing-mode.
Enabling bidirectional support on tailwindcss framework
Tailwind bi-directionality plugin
Tailwind plugin for adding brands colors as background, border and text colors.
Tailwind CSS plugin that generates Bootstrap's flexbox grid
This is a Tailwind CSS package which allows you to use CSS filters.
🔌 TailwindCSS utility classes for trimming whitespace above & below capital letters.
tailwindcss plugin for hide scrollbar
Tailwind CSS preset to extend Tailwind CSS's Transition Timing Function
A TailwindCSS Content Placeholder plugin
Tailwind CSS plugin to generate pseudo selector variants.
Adds direction (LTR, RTL) variants to your Tailwind project
A collection of touch variants for the tailwindcss framework
Automatic alpha variants for your Tailwind CSS colors
Tailwind CSS variant for styling based on site language.
!important variant plugin for tailwindcss framework
A Tailwind CSS plugin for matching border radii
TailwindCSS plugin to generate fluid utility classes using existing config
Tailwind CSS plugin to style list and summary markers
Plugin for Tailwind CSS that adds all the different pseudo selectors to variants
A Tailwind CSS component that shows the currently active screen (responsive breakpoint).
Streamlined integration between tailwindcss and heropatterns.com
responsive embed component for tailwindcss
Bootstrap styled tables for Tailwind CSS
Card components for Tailwind CSS
Tailwind CSS plugin to easily add a 'skip to main content' link.
Tailwind plugin to generate css vars '--color-name' for colors list.
Transform Tailwind config file to CSS variables.
Tailwindcss plugin to color caret in input fields
Tailwind CSS plugin to generate gradient background utilities
🔌🌊 Set of useful plugins for tailwindcss
Visually Hidden utility plugin for tailwindcss framework
DEPRECATED: Object-position utilities for Tailwind CSS.
A Tailwind CSS plugin that adds additional functionality to help improve accessibility.
[DEPRECATED] Tailwind CSS plugin to generate layout utilities
Brings grid support to Tailwind CSS
[DEPRECATED] Tailwind CSS plugin to generate transform utilities
[DEPRECATED] Tailwind CSS plugin to generate transition utilities
Transition utility plugin for tailwindcss framework
Plugins & helpers for tailwindcss
DEPRECATED: All of the missing cursor utilities for Tailwind CSS.
A plugin for Tailwind CSS to create utility classes for font-variant-numeric.
Automatic alpha variants for your Tailwind CSS colors based on your opacity config
Spinner utility for Tailwind CSS
TailwindCSS plugin to generate classes for setting fixed space between containers child elements.
A better base for styling form elements with Tailwind CSS.
Tools
Color Kraken is an hsl tailwind integration that generates custom color shades from a given hexcolor
A Babel plugin to add custom dark class when compiling your code using Babel.
🔌 Convert Bootstrap CSS code to Tailwind CSS code
Small utility to convert .html files with tailwind v.0.x class name into compatible with version v.1.0
⚙️ Shift to the next TailwindCSS version hassle-free.
CLI for organizing Tailwind CSS classes
A react-native style system based on TailwindCSS
Brings types to TailwindCSS via TypeScript.
Plug Tailwind CSS to your Gatsby website
A Tailwind plugin for Gridsome.
An ultra-fast TailwindCSS docs search workflow for Alfred 3+
A CLI tool for integrating Tailwind CSS into Angular-CLI projects
vue-cli plugin for Tailwind CSS
Figma Kit for TailwindCSS
Figma Plugin for TailwindCSS
Tailwind CSS module for Nuxt
Preact CLI Plugin that helps add Tailwind CSS to your project
Sort a tailwind classlist by plugin name.
Sort tailwind classes in HTML with Prettier.
tailwind with CSS-in-JS
🦹♂️ Use Tailwind classes within css-in-js libraries
A local UI tool for visualizing your Tailwind CSS configuration file.
A set of Blade components to rapidly build forms with Tailwind CSS Custom Forms and Bootstrap 4. Supports validation, model binding, default values, translations, Laravel Livewire, includes default vendor styling and fully customizable!
🔥 A schematic that adds Tailwind CSS to Angular applications
Brings TailwindCSS https://tailwindcss.com to ReasonML
Create Tailwind CSS plugin and publish on npm with ease
👩💻👨💻 Awesome cheatsheets for popular programming languages, frameworks and development tools. They include everything you should know in one single file.
Color shades generator for Tailwind CSS.
Color palette generator that outputs Tailwind CSS configuration files.
Color explorer for Tailwind CSS.
OpenAI GPT-3 powered Tailwind CSS code generator.
Tailwind classes' prefixer tool.
Zeplin extension that generates Tailwind configurations.
Code generator that creates Tailwind CSS based HTML & CSS from Sketch designs.
Tailwind CSS class names, variants and directives cheat sheet.
UI Libraries, Components & Templates
Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
Vue UI components with configurable classes ready for TailwindCSS
Jakarta LTE - Free and Open Source Premium Admin Templates with rich UI Kit base on Tailwind CSS
Datepicker component for vue.js build with Tailwind CSS & dayjs date library
UI library for Tailwind CSS
admin panel template built on tailwind css
Simple Resume Template with Tailwind CSS
Simple Light is a free landing page template built on top of TailwindCSS and fully coded in React. Made by
Dashboard starter template built with Vue 3 and Tailwind CSS.
A free Nuxt.js tailwindcss landing page template designed to showcase SaaS businesses, online services, and more.
Clean UI based on tailwindcss
Tails is a (no-config) copy'n paste library of templates and components crafted using TailwindCSS
Community-driven Tailwind CSS component repository.
Beautiful Tailwind CSS components that support RTL languages.
Accessible and reusable components that are commonly used in web applications.
Collection of Tailwind CSS component blocks and UI elements.
Switches using jQuery and Tailwind CSS.
Framework-agnostic, Vue.js, React and Angular components.
Multi theme, completely accessible dashboard template.
Landing page template using gradients (1.7+).
Starters & Themes
Create React apps with no build configuration, extended with TailwindCSS and PurgeCSS
Adds Tailwind CSS to a Laravel application
A Tailwind CSS frontend preset for the Laravel Framework
Dark tailwindcss preset including auth views
React + Tailwind + Emotion
A streamlined Tailwind CSS template for Create React App in TypeScript
🌬A bare-bones Tailwind CSS boilerplate
Jekyll starter styled with Tailwind CSS
Starter project for using Jekyll with Tailwind CSS
A starter kit to get going with tailwind, gulp and browser-sync.
Gatsby starter styled with Tailwind CSS
A Simple, Free Gatsby/TailwindCSS Starter Theme For Business Websites
Gatsby + TypeScript + TailwindCSS
A Gatsby Starter with Tailwind CSS + Emotion Js
Get up and developing quickly with Gatsby, Tailwind CSS, and some opinionated goodies
Integrate Tailwind CSS in a Create React App setup
create react app with tailwindcss configed
A WordPress starter theme including Webpack (via Laravel Mix), Vue, Babel and Tailwind CSS.
Next.js starter styled with Tailwind CSS
Sapper, Svelte, TailwindCSS, PurgeCSS starter with Prettier and ESLint enabled
A starter project with Netlify Lambda, Tailwind CSS and static pages.
Starter files for a Hugo theme with Tailwindcss
A modern static website workflow using Eleventy, Tailwind CSS, Webpack and PostCSS.
Tailwind CSS + PostCSS + BrowserSync boilerplate
Tailwind CSS + ParcelJS + TypeScript boilerplate
A starter of build VuePress Theme with TailwindCss.
A Gatsby theme based on gatsby-serif-theme, rewrite with Tailwind CSS.
🚀 Eleventy Starter is production-ready with SEO-friendly for quickly starting a blog. ⚡ Built with Eleventy, ESLint, Prettier, Webpack, PostCSS, Tailwind CSS.
Starter using Vite + React + Tailwind
Vite + Vue 3.x + Tailwind 2.x (starter)
🧪 Shopify theme development environment using Vue and Tailwind CSS
Responsive dashboard layout
Open-Source Projects
Self hosted project management and collaboration tool powered by TALL stack
A Marvelous Open Source Status Page System
Front-end application for Todolist Web application built with Laravel and Vue.js
📈 League of Legends Stats Web App
Svelte ecommerce - Headless, Authentication, Cart & Checkout, TailwindCSS, Server Rendered, Proxy + API Integrated, Animations, Stores, Lazy Loading, Loading Indicators, Carousel, Instant Search, Faceted Filters, 1 command deploy to production, Open Source, MIT license. Join us as contributor ([email protected])
Moltin, Tailwindcss powered VueCommerce
Learning
Examples to help you get started building your own Tailwind CSS plugins.
Basic demo on how to switch styles with Tailwind, handy for dark mode type purposes.
A clone of Acquia's dashboard, built with Vue.js and Tailwind CSS.
An switch toggle for https://tailwindcss.com/
An implementation of the “Open” landing page template using Tailwind CSS Boilerplate.
Demo of building real-world UIs using TailwindCSS
How to test Tailwind CSS plugins with Jest.
How to setup Tailwind CSS with PostCSS and Webpack.
How to use Tailwind CSS with CSS-in-JS.
How to setup Tailwind CSS in a Laravel project.
How to add Tailwind CSS to an Ember application.
How to setup Tailwind CSS in Sage.
How to use Tailwind CSS with Gatsby.
How to setup Tailwind CSS in Phoenix 1.4.
Rebuilding Laravel.io with Tailwind CSS.
Rebuilding Coinbase with Tailwind CSS [see the Codepen].
Rebuilding Twitter with Tailwind CSS [see the CodePen].
Rebuilding YouTube with Tailwind CSS.
Rebuilding Netlify with Tailwind CSS.
Rebuilding Resolute with Tailwind CSS.
Building a movie production landing page with Tailwind CSS.
Building a responsive navbar with Tailwind CSS.
Dribbble shot with Tailwind CSS.
Building a Tweet component with Tailwind CSS.
Creating a modal dialog with Tailwind CSS.
Rebuilding FreshBooks with Tailwind CSS.
Creating a login page with Tailwind CSS.
Building a Vue.js component in a Laravel project.
Building a customizable modal with Tailwind CSS and Vue.js.
How to style a form with Tailwind CSS.
Building a photo gallery with CSS grids and Tailwind CSS.
Rebuilding Bartik (Drupal's default theme) with Vue.js and Tailwind CSS.
Rebuilding Airbnb's Home Page with Tailwind CSS.