Track Awesome Tailwindcss Updates Daily
😎 Awesome things related to Tailwind CSS
🏠 Home · 🔍 Search · 🔥 Feed · 📮 Subscribe · ❤️ Sponsor · 😺 aniftyco/awesome-tailwindcss · ⭐ 12K · 🏷️ Front-End Development
Sep 10, 2023
UI Libraries, Components & Templates
- 📚 STDF - Mobile web component library based on Svelte and Tailwind CSS.
Sep 04, 2023
UI Libraries, Components & Templates
- 🧩 Shadcn UI - Re-usable components built using Radix UI and Tailwind CSS.
Aug 28, 2023
Learning
- 🎬 Responsive Framer Motion with Tailwind CSS - Learn how CSS variables can bridge the gap between Framer Motion and Tailwind CSS.
Aug 22, 2023
Tools
- 🌍🔧 Tailwind Box Shadows Generator - Box Shadows generator.
Aug 07, 2023
Learning
- 🎬 10 Tailwind CSS Tips and Tricks - 10 Tailwind CSS tricks you should know.
Aug 05, 2023
UI Libraries, Components & Templates
- 🧩 TailwindFlex - Free library of Tailwind CSS examples.
- 📁 Astro Template Cactus (⭐343) - Tailwind CSS Astro starter template.
Jul 31, 2023
UI Libraries, Components & Templates
- 🧩 Windstatic - Set of 161 elements & layouts made with Tailwind CSS and Alpine.js.
Jul 20, 2023
UI Libraries, Components & Templates
- 🧩 Material Tailwind - Easy to use components library for Tailwind CSS and Material Design.
- 🧩 Layouts for Tailwind - Layouts and UI Patterns for Tailwind CSS.
- 🧩 HyperUI - Open source marketing and ecommerce Tailwind CSS components.
- 🧩 Snippets - Open source collection of animation snippets made for Tailwind CSS.
- 🧩 Fancy Tailwind - Large collection of Tailwind CSS UI components (700+).
- 🧩 Myna UI - Open source UI Components and Marketing Elements made with Tailwind CSS.
- 🧩 RippleUI - Clean, modern and beautiful Tailwind CSS components.
- 🧩 Wind UI - Expertly made, responsive, accessible components in React and HTML ready to be used on your website or app.
- 🧩 Pines UI - Alpine and Tailwind CSS UI library.
- 📁 Landing Gradients - Landing page template using gradients (1.7+).
Starters & Themes
- 🚀 Tailwind sites - Free Tailwind CSS site templates for your next project.
Jun 30, 2023
Tools
- 💼 DivMagic - Copy any web element and style as Tailwind CSS component.
Jun 27, 2023
IDE Extensions
- LSP support for Emacs (⭐142) - LSP support for Emacs.
Jun 16, 2023
Tools
- 💼 Raycast Extension - Search classes, documentation and colors in Raycast Launcher.
May 13, 2023
UI Libraries, Components & Templates
- 📚 Tailkits - Curated Tailwind CSS components, templates, UI kits, resources, tools & more.
May 12, 2023
Tools
- 🎨🌍🔧 Tints - Color palette penerator and API for Tailwind CSS.
May 10, 2023
Plugins
- 💼 Claymorphism (⭐5) - Adds
clay
utilities for creating claymorphism style.
May 03, 2023
Tools
- 🌍🔧 Tailwind Grid Generator - Drag and drop Tailwind CSS grid generator.
Apr 18, 2023
Plugins
- 💼 TailwindCSS 3D (⭐75) - Adds 3D
transform
utilities and animations.
Apr 15, 2023
Plugins
- 💼 CSS Filter Order (⭐0) - Adds
filter-order
utilities for changing the order of filters in the generated CSS.
Apr 08, 2023
UI Libraries, Components & Templates
- 📚 Statichunt - Open source directory of hand-picked free and premium Tailwind templates & Starters.
Apr 07, 2023
UI Libraries, Components & Templates
- 📚 Built At Lightspeed - Massive directory of 500+ Tailwind templates, starters and UI kits.
Mar 25, 2023
UI Libraries, Components & Templates
- 📁 Astro Template Resume (⭐4) - Eye-catching resume template built with Astro, Tailwind CSS.
Mar 24, 2023
UI Libraries, Components & Templates
- 🧩 NativeWind - NativeWind uses Tailwind CSS as scripting language to create a universal style system for React Native.
Starters & Themes
- 🚀 Angular-Tailwind (⭐75) - Dashboard starter kit using Angular and Tailwind CSS.
- 🚀 Vue-Resume (⭐4) - Developer resume template with Tailwind CSS and Vue.
Mar 20, 2023
Tools
- 🌍🔧 Loopple Builder - Dashboard drag-and-drop builder for Tailwind CSS.
Feb 03, 2023
IDE Extensions
- CSS to TailwindCSS converter for Code (⭐31) - CSS to Tailwind CSS converter extension for Visual Studio Code.
Jan 31, 2023
UI Libraries, Components & Templates
- 🧩 Sira UI - Customizable and accessible design system which provides TailwindCSS component class name library to build modern UI.
Jan 24, 2023
Tools
- 💼 Tailscan - Ultimate devtools for Tailwind CSS v3 with ability to inspect and convert CSS to Tailwind CSS classes.
Jan 18, 2023
UI Libraries, Components & Templates
- 📁 Flowbite Admin Dashboard (⭐882) - Open-source admin dashboard template built with Tailwind CSS and Flowbite.
Jan 02, 2023
UI Libraries, Components & Templates
- 📚 Sailboat UI - Modern UI framework for Tailwind CSS.
Dec 27, 2022
Plugins
- 🎨💼 Accent (⭐10) - Adds
accent
colors for more dynamic and flexible color utilization.
Dec 26, 2022
Tools
- 💼 react-with-class (⭐7) - Utility function for creating primitive React components with a set of classes, props or variants.
Dec 23, 2022
UI Libraries, Components & Templates
- 📚 Vanilla Components - Set of fully customizable Vue components.
Dec 11, 2022
Tools
- 💼 Tailiscope.nvim (⭐43) - Tailwind CSS cheat sheet integrated in Neovim.
UI Libraries, Components & Templates
- 📁 Admin One React (⭐241) - Free React.js Tailwind CSS admin template with Next.js & TypeScript.
Nov 09, 2022
Tools
- 💼🌍 Supertweak - Visual devtools for Tailwind CSS.
Oct 13, 2022
Tools
- 💼🔧 tailwindcss-vite-plugin (⭐30) - Vite plugin for Tailwind CSS, supports "Design in Devtools" mode and visualizes Tailwind CSS configuration.
Sep 28, 2022
Tools
- 🔼🌍🔧 Tailwindhelper - Visualize Tailwind CSS classes and unit converter.
Sep 11, 2022
Plugins
- 💼 Full Bleed Background and Borders (⭐35) - Provides utilities for extended backgrounds and borders.
Aug 25, 2022
Starters & Themes
- 🚀 AstroWind (⭐1.3k) - Production ready and SEO-friendly template to start a website using Astro and Tailwind CSS.
Jul 31, 2022
Plugins
- 💼 Hyphens (⭐12) - Adds
hyphens
utilities.
Jul 25, 2022
Tools
- 💼 Impulse.dev – UI editor for Tailwind CSS and React that edits your code.
Jun 22, 2022
Starters & Themes
- 🚀 Vite + Lit + Tailwind Starter (⭐19) - Boilerplate using Vite, Lit and Tailwind CSS.
Jun 14, 2022
Tools
- 💼 Tails Devtools (⭐199) - All-in-one browser extension for Tailwind CSS.
May 17, 2022
UI Libraries, Components & Templates
- 📚 Xtend UI - Tailwind CSS components with advanced interactions and animations.
- 📚 Headless UI Float - Floating UI integration for Headless UI.
Apr 28, 2022
Plugins
- 💼 Grid Areas (⭐76) - Adds
grid-areas
andgrid-area
utilities.
Tools
- 💼🔧 tailwindcss-webpack-plugin (⭐30) - Out-of-the-box Tailwind CSS, supports "Design in Devtools" mode and visualizes Tailwind CSS configuration.
Apr 15, 2022
IDE Extensions
- Tailwind CSS Highlight - Highlight utilities extension for Visual Studio Code.
Apr 06, 2022
Tools
- 🎨🌍🔧 Ui Colors - Color palette generator for Tailwind CSS.
Mar 28, 2022
Open-Source Projects
- GitProfile (⭐978) - Automatic portfolio builder based on GitHub profiles, built with React.js and Tailwind CSS.
Mar 19, 2022
Tools
- 💼 twined-components (⭐7) - Extended component of a styled-components that prioritizes class names for use in Tailwind CSS.
Mar 18, 2022
Open-Source Projects
- Angular Spotify (⭐2.4k) - Spotify client built with Angular, Nx Workspace and Tailwind CSS.
Mar 14, 2022
Starters & Themes
- 🚀 Vite-Boot (⭐164) - Vite + Vue3 + TypeScript + Vue-Router4 + Pinia + Tailwind CSS + VueUse Template.
Mar 09, 2022
Plugins
- 🧬 FormKit (⭐3.5k) - Adds variants for input and form states for FormKit.
Feb 18, 2022
Plugins
- 💼 Background Unsplash (⭐14) - Apply unsplash.com images as background.
Jan 21, 2022
UI Libraries, Components & Templates
- 📁 Cruip - Beautifully designed HTML, React, and Vue.js templates.
Jan 13, 2022
Starters & Themes
- 🚀 Vite + React + TypeScript + Tailwind 3.x starter (⭐48) - GitHub Template for Vite, React + Tailwind 3.x + TypeScript.
Jan 03, 2022
UI Libraries, Components & Templates
- 📚 Svelte Headless UI (⭐1.6k) - Unofficial Svelte port of Headless UI.
Dec 29, 2021
Plugins
- 🎨🧬 Themer (⭐186) - Adds theming support for Tailwind CSS with CSS variables and variants.
Dec 18, 2021
Plugins
- 🧬 Container Queries (⭐82) - Adds CSS Container Query variants.
Dec 10, 2021
Plugins
- 🛑💼 Scroll Behavior (⭐6) - Adds
scroll-smooth
andscroll-auto
classes to control smooth scrolling.
- 🛑💼 Accent Color (⭐0) - Adds accent color utilities.
- 🛑💼 Text Indent (⭐24) - Adds
text-indent
utilities.
- 🛑💼 Text Decoration Color (⭐11) - Adds
text-decoration-color
utilities.
- 🛑💼 Downwind CSS Text Decoration (⭐8) - Adds composable
text-decoration
utilities.
- 🛑💼 Capitalize first letter (⭐3) - Adds
capitalize-first
utilities.
- 🛑💼 Aspect Ratio (⭐249) - Adds
aspect-ratio
utilities.
- 🛑💼 Shadow Outline Colors (⭐9) - Adds
box-shadow
utilities based on configured colors.
- 🛑💼 Alpha (⭐71) - Adds alpha color variant utilities.
- 🛑🧬 Direction (⭐218) - Adds
RTL
andLTR
variants.
- 🛑🧬 Important (⭐42) - Adds an
important
variant.
- 🛑🧬🎨 Prefers Dark Mode (⭐12) - Adds variants based on the
prefers-color-scheme
media query.
- 🛑🧬🎨 Dark Mode (⭐15) - Adds
dark
variants based on CSS classes.
- 🛑🧬🎨 Dark Mode (⭐646) - Adds
dark
variants based on theprefers-color-scheme
media query.
Dec 07, 2021
Tools
- 💼 Tailwind CSS Figma UI Design Kit - Figma UI Design Kit for Tailwind CSS.
- 🌍 Tailwind Cheat Sheet - Tailwind CSS utility class names in a searchable interface.
UI Libraries, Components & Templates
- 📁 Admin One Vue 3 (⭐1.6k) - Free Vue.js 3 Tailwind CSS admin template with Vite & Vue CLI support.
Dec 01, 2021
Tools
- 💼🌍 Inspect Flow - The complete developer tool for Tailwind CSS.
Nov 25, 2021
Plugins
- 🎨🧬 Themeable (⭐46) - Adds multiple themes support for Tailwind CSS.
Nov 24, 2021
Plugins
- 💼🧬 Radix (⭐1.9k) - Adds utilities and variants for styling Radix UI state.
Nov 19, 2021
Learning
- 🔧 Tailwind CSS with Ember (⭐23) - How to add Tailwind CSS to an Ember application.
Nov 01, 2021
UI Libraries, Components & Templates
- 📁 Red Pixel Themes - Paid, developer-friendly templates made with Tailwind CSS.
Oct 27, 2021
Starters & Themes
- 🚀 Vitailse (⭐130) - Opinionated Vite starter template with Vue 3, TypeScript and Tailwind CSS.
Oct 23, 2021
UI Libraries, Components & Templates
- 📁 Material Tailwind Kit React - Free Tailwind CSS and React UI kit.
- 📁 Material Tailwind Dashboard React - Free Tailwind CSS and React admin template.
Oct 22, 2021
UI Libraries, Components & Templates
- 📚 a17t - Atomic design toolkit built to extend Tailwind CSS.
- 📚 tails-ui (⭐193) - React UI library using Tailwind CSS.
- 📚 tails (⭐33) - Hand-crafted templates and components using Tailwind CSS.
- 📁 Vue Notus - Open-source Tailwind CSS and Vue.js UI kit.
- 📁 EasyTailwind - Freemium, easily customizable templates made with Tailwind CSS.
Oct 01, 2021
Tools
- 💼 clb (⭐139) - clb (class list builder) is a utility function that builds a class list based on a Stitches like API.
Sep 30, 2021
Tools
- 🌍 Flowrift - Beautifully designed Tailwind CSS UI blocks.
UI Libraries, Components & Templates
- 🧩 Tailwind Typeahead (⭐20) - Typeahead/Autocomplete component built with Vue.js and Tailwind CSS.
Sep 29, 2021
Plugins
- 🛑💼 Scroll Snap (⭐175) - Adds
scroll-snap
utilities.
UI Libraries, Components & Templates
- 📚 Flowbite - Open-source component library built with Tailwind CSS.
- 🧩 Tailwind Datepicker (⭐128) - Adds a datepicker component built with Tailwind CSS and vanilla JavaScript.
Sep 28, 2021
UI Libraries, Components & Templates
- 📁 OhMySMTP Templates (⭐184) - Set of Transactional HTML Email Templates, built with Maizzle
Sep 24, 2021
Starters & Themes
- 🚀 Next JS Boilerplate (⭐4.7k) - Boilerplate for Next.js and Tailwind CSS.
Sep 22, 2021
Plugins
- 💼 Fluid Type (⭐261) - Adds fluid type (
font-size
) utilities.
Sep 17, 2021
Tools
- 🌍🔧 Windframe - Tailwind CSS drag and drop builder to rapidly build and prototype websites.
Sep 07, 2021
Starters & Themes
- 🚀 Jekyll Starter (⭐7) - Jekyll starter using Tailwind CSS
Sep 02, 2021
UI Libraries, Components & Templates
- 📁 Tailmin (⭐56) - Admin dashboard built with Vue.js and Tailwind CSS.
Jul 30, 2021
Plugins
- 🧩 Perspective (⭐99) - Adds
perspective
utilities.
Jul 17, 2021
Plugins
- 🛑🧬 Pseudo (⭐40) - Adds custom variants to Tailwind CSS's configuration.
Jul 06, 2021
UI Libraries, Components & Templates
- 📚 Vechai UI - High-quality accessible React components with the built-in dark mode using Tailwind CSS.
Jun 25, 2021
Tools
- 🎨🌍🔧 Tailwind Gradient Generator - Create perfect Tailwind CSS gradients with zero lines of code.
Jun 21, 2021
Starters & Themes
- 📟 new-tailwind-app (⭐248) - Creates React.js, Next.js, Gatsby.js, Vue3, Laravel, and basic Tailwind CSS apps.
Jun 12, 2021
Starters & Themes
- 📟 Next.js PWA (⭐77) – CLI that generate boilerplate code of Next.js PWA along with Tailwind CSS integration.
Jun 02, 2021
Plugins
- 🎨🧩 Tailwind Elements - Extends Tailwind CSS with 500+ interactive components (datepickers, modals, forms, tables, darkmode).
May 24, 2021
Tools
- 💼 Gust - Drag and drop page builder for WordPress.
May 23, 2021
Tools
- 🌍 Tailwind Cheat Sheet - Tailwind CSS class names in a searchable page.
May 10, 2021
Tools
- 💼 Tailwind CSS Figma Kit (⭐732) - Figma Kit for Tailwind CSS.
- 💼 Tailwind CSS Figma Plugin (⭐263) - Figma plugin that integrates Tailwind CSS.
Starters & Themes
- 🚀 Gatsby Starter + TypeScript (⭐79) - Gatsby starter using Tailwind CSS and TypeScript.
May 07, 2021
Starters & Themes
- 🚀 Jekyll Landing Website Starter (⭐80) - Production ready, SEO-friendly, performant landing website boilerplate using Jekyll and Tailwind CSS.
Apr 19, 2021
Open-Source Projects
- Ubuntu 20.04 (⭐3.2k) - An Ubuntu desktop using React.js + Tailwind CSS.
Apr 07, 2021
Plugins
- 🧩 CSS Variables (⭐164) - Exports custom CSS variables (Dark Mode supported).
- 🛑💼 Filters (⭐162) - Adds
filter
utilities.
- 🛑💼 CSS Filters (⭐24) - Adds
filter
andbackdrop-filter
utilities with defaults.
- 🛑💼 Blend Mode (⭐66) - Adds
blend-mode
utilities.
- 🛑💼 Colorize (⭐10) - Adds
filter
utilities.
Learning
- 💙🎬 Tailwind CSS: From Zero to Production - Complete walkthrough of Tailwind CSS, from installation to optimization for deployment.
Mar 19, 2021
Tools
- 🔼 Windy - Browser extension to convert HTML elements to Tailwind CSS.
Mar 17, 2021
UI Libraries, Components & Templates
- 🧩 Tailwind Cards (⭐518) - Growing collection of text/image cards.
Mar 16, 2021
Plugins
- 🎨🧬 Theme Variants (⭐156) - Adds theme variants based on media queries and/or CSS selectors.
Mar 10, 2021
UI Libraries, Components & Templates
- 🧩 Litepie Date picker (⭐371) - A date range picker component for Vue.js and Tailwind CSS.
Mar 07, 2021
Plugins
- 💼 No Scrollbar (⭐9) - Exposes
scrollbar-none
to visually hide a scrollbar.
Mar 01, 2021
Tools
- 🌍🔧💼 Twind (⭐3.5k) - Compiler functions that turn Tailwind's classes into CSS at run, serve and build time.
Feb 25, 2021
Plugins
- 💼 Content Placeholder (⭐109) - Adds utilities for content placeholder images.
Feb 14, 2021
Plugins
- 💼 Downwind CSS Easings (⭐5) - Extends
transition-timing-function
utilities.
Feb 08, 2021
Learning
Feb 06, 2021
Plugins
- 🧬 Pseudo selectors (⭐38) - Adds variants for the pseudo-classes and pseudo-elements that Tailwind CSS doesn't have by default.
UI Libraries, Components & Templates
- 🧩 Mamba UI - Free Tailwind CSS components, sections and templates.
Feb 04, 2021
UI Libraries, Components & Templates
- 🧩 Kometa UI Kit - Free multi-purpose UI kit, built with Tailwind CSS.
Feb 02, 2021
Tools
- 🌍 Updrafts.app - Advanced online no-code drag and drop editor for Tailwind CSS.
Feb 01, 2021
Plugins
- 💼 Scrollbar Hide (⭐159) - Adds
scrollbar-hide
class for visual hide scrollbar.
Jan 31, 2021
UI Libraries, Components & Templates
- 🧩 Daisy UI (⭐24k) - UI Components for Tailwind CSS.
Jan 30, 2021
Plugins
- 💼 Bidirectional (⭐9) - Replace the core utilities to be bi-direction compatible.
Jan 25, 2021
Tools
- 🌍🔧 brands-tail-color - Configuration generator using various brands' colors.
- 💼 @ngneat/tailwind (⭐608) - Tailwind CSS integration for Angular.
Jan 23, 2021
Tools
- 🔧 create-tailwind-plugin (⭐20) - Plugin scaffolder for Tailwind CSS.
Jan 22, 2021
UI Libraries, Components & Templates
- 🧩📁 themes.dev - Handcrafted, free and premium Tailwind CSS themes and components.
Learning
Jan 14, 2021
Tools
- 💼 tailwindcss-rails (⭐1.2k) - Gem for using Tailwind CSS with Rails' asset pipeline.
Jan 07, 2021
Plugins
- 🛑💼💙 Line Clamp (⭐1.1k) - Provides utilities for visually truncating text after a fixed number of lines.
Jan 01, 2021
Tools
- 🎨🔧💼 babel-plugin-tailwind-dark (⭐7) - A Babel plugin to add custom dark class when compiling your code using Babel.
Dec 30, 2020
UI Libraries, Components & Templates
- 🧩 WickedBlocks - Collection of more than 120 layout blocks and components built with Tailwind CSS.
Dec 15, 2020
Tools
- 🎨🌍🔧 Gradient Designer - Generate gradients for Tailwind 2.0+.
Starters & Themes
- 🚀 Starter Dashboard Layout (⭐194) - Dashboard layout using Tailwind CSS and Alpine JS.
Dec 14, 2020
UI Libraries, Components & Templates
- 📁 Petra (⭐29) - Free landing page template built with Nuxt.js & Tailwind CSS.
Dec 12, 2020
Tools
- 🎨🔧💼 Colorkraken (⭐14) - Color shades generator for Tailwind CSS.
UI Libraries, Components & Templates
- 🧩 Windstrap - Tailwind CSS with Bootstrap JS.
Dec 09, 2020
Starters & Themes
- 🚀 Shopify Theme Lab (⭐683) - Shopify theme development starter using Vue and Tailwind CSS.
Dec 06, 2020
Starters & Themes
- 🚀 Vite + Vue 3.x + Tailwind 2.x Starter - Starter template using Vite, Vue, Vue Router and Tailwind CSS.
Nov 19, 2020
IDE Extensions
- Tailwind CSS Explorer for Code - Explore the classes available in your project's Tailwind CSS setup.
Nov 13, 2020
Plugins
- 💙💼 Aspect Ratio (⭐846) - Adds composable aspect ratio utilities.
- 💙 Forms (⭐3.5k) - Adds better default styles to form elements.
- 🛑🧩💙 Custom Forms (⭐1.6k) - Adds better default styles to form elements.
Nov 06, 2020
Tools
- 🎨🌍💼 Tailwind CSS v2 colors - Figma library with Tailwind CSS v2 colors.
Nov 04, 2020
UI Libraries, Components & Templates
- 📁 V-Dashboard (⭐826) - Dashboard starter template built with Vue 3 and Tailwind CSS.
Starters & Themes
- 🚀 Vite + React + Tailwind Starter (⭐207) - Boilerplate using Vite, React and Tailwind CSS.
Oct 25, 2020
UI Libraries, Components & Templates
- 🧩📁 Jakarta LTE (⭐144) - Admin template using Tailwind CSS.
Oct 19, 2020
UI Libraries, Components & Templates
- 📁 Resume (⭐43) - Simple resume with Tailwind CSS.
- 📁 Simple Light (⭐2.3k) - Free landing page template built with React & Tailwind CSS.
Oct 16, 2020
Tools
- 🎨🌍🔧 Palettolithic - Generates harmonius color palettes based on one color.
Oct 13, 2020
Plugins
- 🛑💼 Font Variant Numeric (⭐8) - Adds
font-variant-numeric
utilities.
Oct 12, 2020
Tools
- 💼 tailwind-classes-sorter (⭐19) - NPM library which provides a utility to sort Tailwind CSS classes.
- 💼 prettier-plugin-tailwind (⭐433) - Prettier plugin that sorts class lists.
Oct 08, 2020
Tools
- 🎨🌍🔧 Hypercolor - Collection of pre-configured Tailwind CSS gradients with directional options.
Oct 07, 2020
Tools
- 🌍💙 Play - Advanced online playground for Tailwind CSS.
Oct 04, 2020
UI Libraries, Components & Templates
- 💙📚 Headless UI (⭐22k) - Completely unstyled, fully accessible UI components.
Oct 02, 2020
Tools
- 🌍🔧 tail-animista - Configurable custom animation utilities generator for Tailwind CSS.
Oct 01, 2020
Tools
- 🔼🌍 CSS to Tailwind CSS Converter - Converts CSS to Tailwind CSS by suggesting classes that best match.
Sep 23, 2020
Plugins
- 💼 Leading Trim (⭐69) - Adds utilities to trim text whitespace, using Capsize (⭐1.3k).
Sep 20, 2020
Starters & Themes
- 🚀 Eleventy Starter (⭐256) - Production-ready, SEO-friendly blog starter using Tailwind CSS.
Sep 17, 2020
Tools
- 🎨🌍🔧 Grayscale Design - A Luminance-based color palette generator.
Sep 08, 2020
Tools
- 🎨🌍🔧 TailwindInk - AI palette generator, trained with the Tailwind CSS palette.
Sep 07, 2020
Tools
- 🌍 Typography Playground - Tool for trying different Google Fonts combinations with the Tailwind CSS Typography Plugin.
Sep 04, 2020
Tools
- 🎨🌍🔧 Tailwind Color Explorer - Color explorer for Tailwind CSS.
Sep 01, 2020
Useful Links
- 💙 Website - Official Tailwind CSS website.
- 💙 Repository (⭐72k) - Official Tailwind CSS repository.
- 💙 Discussions (⭐72k) - Official place to connect with other community members about Tailwind.
- 💙 Heroicons - Beautiful, hand-crafted SVG icons.
- Tailwind Weekly - Weekly newsletter about all things Tailwind CSS.
UI Libraries, Components & Templates
- 💙🧩 Tailwind UI - Component library made with Tailwind CSS.
- 📚 VueTailwind (⭐2.1k) - Vue.js UI library using Tailwind CSS.
- 🧩 TailBlocks - 60+ different ready to use Tailwind CSS blocks.
- 🧩 Tailwind Components - Community-driven Tailwind CSS component repository.
- 🧩 Tailwind Toolbox - Templates, components and resources.
- 🧩 Meraki UI Components - Beautiful Tailwind CSS components that support RTL languages.
- 🧩📁 Tailwind Templates - Collection of templates and components.
- 🧩📁 Treact - React UI templates and components built using Tailwind CSS.
- 🧩 Sail UI - Collection of basic UI components built on Tailwind CSS.
- 🧩 jQuery Toggler - Switches using jQuery and Tailwind CSS.
- 🧩 Tailwind Kit - Framework-agnostic, Vue.js, React and Angular components.
- 📁 Windmill Dashboard - Multi theme, completely accessible dashboard template.
- 📁 Tailwind Admin (⭐439) - Administration panel template with Tailwind CSS.
IDE Extensions
- 💙 IntelliSense for Code - IntelliSense extension for Visual Studio Code.
- Styled Snippets for Code - Snippet extension for Visual Studio Code.
- Headwind for Code (⭐1.3k) - Class sorter extension for Visual Studio Code.
- Shades for Code (⭐68) - Color palette generator extension for Visual Studio Code.
- IntelliSense for Neovim (⭐337) - IntelliSense extension for Neovim.
Plugins
- 💙🧩 Typography (⭐3.2k) - Adds a
prose
class for beautiful typographic defaults.
- 🎨🧬 Theming (⭐484) - Theming using CSS variables, with dark mode support.
- 🎨🧬 Multi Theme (⭐504) - Adds theme variants based on a single
theme
property.
- 🎨🧬 Theme Swapper (⭐252) - Theming using CSS variables, with media queries support.
- 💼 Custom Native (⭐65) - Leverages Tailwind CSS's configuration to allow the creation of utilities.
- 💼 Image Rendering (⭐79) - Adds
image-rendering
utilities.
- 💼 Elevation (⭐157) - Adds Material UI
elevation
utilities.
- 💼 Writing Mode (⭐11) - Adds
writing-mode
utilities.
- 💼 Border Gradients (⭐223) - Adds
border-image
gradient utilities.
- 💼 List Reset (⭐1) - Adds back the
list-reset
class that was removed prior to Tailwind CSS 1.0.
- 💼 Fluid (⭐118) - Adds fluid sizing utilities.
- 💼 Typography (⭐247) - Adds typography utilities.
- 💼 Triangle After (⭐20) - Adds CSS triangles utilities.
- 💼 Scrims (⭐41) - Adds scrims utilities.
- 💼 Truncate Multiline (⭐94) - Adds utilities to truncate multi-line text elements.
- 💼 CSS Logical Properties (⭐19) - Generate utilities for CSS Logical Properties.
- 💼 Tooltip Arrows After (⭐44) - Adds CSS utilities for tooltip arrows with configurable border and background.
- 💼 Bidirectional (⭐332) - Adds utilities for creating multilingual bidirectional layouts.
- 💼 Background SVG (⭐16) - Inject SVGs as background images with color variants.
- 💼 Brand Colors (⭐69) - Adds various brand colors for background, border and text.
- 💼 Bootstrap Grid (⭐144) - Generates Bootstrap's style flexbox grid system.
- 🧬 Touch (⭐52) - Adds
touch
variants.
- 🧬 Localized (⭐9) - Adds variants based on the HTML
lang
attribute, to use utilities only with certain languages.
- 🧬 Padded Radius (⭐20) - Adds variants for matching nested border radii.
- 🧬 Fluid (⭐30) - Generates
fl:
variants.
- 🧩 Debug Screens (⭐518) - Adds a component that shows the currently active screen (responsive breakpoint).
- 🧩 Heropatterns (⭐185) - Adds Hero Patterns components.
- 🧩 Responsive Embed (⭐83) - Adds a
responsive-embed
component.
- 🧩 Bootstrap Tables (⭐96) - Adds table components based on Bootstrap's tables.
- 🧩 Card (⭐43) - Adds card components.
- 🧩 Skip link (⭐14) - Adds a Skip to main content accessible component.
- 🧩 Colors to CSS Variables (⭐28) - Exports color configuration to CSS Custom Properties.
- 🧩 CSS Variables (⭐135) - Exports configuration to CSS Custom Properties.
- 🛑💼 benface's gradients (⭐289) - Adds gradient utilities.
- 🛑💼 lorisleiva's gradients (⭐286) - Adds background gradient utilities.
- 🛑💼 Visually Hidden (⭐14) - Adds screen reader utilities.
- 🛑💼 Object Fit (⭐7) - Adds
object-fit
utilities.
- 🛑💼 Object Position (⭐1) - Adds
object-position
utilities.
- 🛑💼 Accessibility (⭐38) - Adds screen reader utilities.
- 🛑💼 Layout (⭐17) - Adds some layout utilities.
- 🛑💼 Grid (⭐118) - Adds CSS grids utilities.
- 🛑💼 Transforms (⭐99) - Adds
transform
utilities.
- 🛑💼 benface's transitions (⭐191) - Adds configurable transition utilities, with or without CSS variables.
- 🛑💼 webdna's transitions (⭐38) - Adds configurable transition utilities.
- 🛑💼 glhd's transitions (⭐86) - Adds basic transition utilities.
- 🛑💼 Cursor Extended (⭐7) - Extends
cursor
utilities.
- 🛑🧬 CSS Alpha Colors (⭐22) - Adds opacity variants to existing colors.
- 🛑🧩 Spinner (⭐172) - Adds a spinner component.
- 🛑🧩 Spaced Items (⭐15) - Adds
spaced
components that add fixed margins to all container items.
Tools
- 🎨🌍🔧 Tailwind Color Shades - Color shades generator for Tailwind CSS.
- 🎨🌍🔧 Palette generator - Color palette generator that outputs Tailwind CSS configuration files.
- 🎨🌍🔧 Tailwind Colors - Color configuration generator for Tailwind CSS.
- 🌍🔧 GPT-3 Tailwind CSS code generator - OpenAI GPT-3 powered Tailwind CSS code generator.
- 🔼🌍 Tailwind Automatic Prefix Applicator - Tailwind classes' prefixer tool.
- 🔼 Tailwindo (⭐1k) - Bootstrap to Tailwind CSS converter.
- 🔼 Tailupgrade (⭐6) - Conversion tool for upgrading HTML files from Tailwind CSS v0.x to v1.0.
- 🔼 Tailwind Shift (⭐120) - Upgrade tool for upgrading from Tailwind CSS v0.7 to v1.0.
- 🔼 RustyWind (⭐351) - CLI tool for sorting Tailwind CSS classes.
- 🅰 react-native-tailwindcss (⭐550) - React Native typing system.
- 💼 Gatsby Plugin (⭐47) - Tailwind CSS integration for Gatsby.
- 💼 Gridsome Plugin (⭐103) - Tailwind CSS integration for Gridsome.
- 💼 Alfred Workflow (⭐114) - Fast Tailwind CSS documentation search application.
- 💼 ng-tailwindcss (⭐200) - CLI tool for integrating Tailwind CSS into Angular-CLI projects.
- 💼 vue-cli-plugin-tailwind (⭐210) - Vue CLI plugin that adds Tailwind CSS to a project.
- 💼 @nuxtjs/tailwindcss (⭐1.4k) - Tailwind CSS module for NuxtJS with PurgeCSS and modern CSS (preset env 1).
- 💼 preact-cli-tailwind (⭐32) - Tailwind CSS integration for Preact.
- 💼🔧 Zeplin Config & Class generator - Zeplin extension that generates Tailwind configurations.
- 💼🔧 @tailwindcssinjs/macro (⭐375) - Babel macro that transforms Tailwind CSS classes into objects for CSS-in-JS libraries.
- 💼🔧 twin.macro (⭐7.5k) - Use Tailwind classes within any CSS-in-JS library.
- 💼🔧 Tailwind Config Viewer (⭐1.7k) - Local UI tool for visualizing your Tailwind CSS configuration file.
- 💼🔧 Laravel Form Components (⭐780) - Blade form components using Tailwind CSS Custom Forms.
- 🔧 re-tailwind (⭐120) - ReasonML utility that generates Tailwind classes.
- 🔧 Protoship Codegen - Code generator that creates Tailwind CSS based HTML & CSS from Sketch designs.
- 🚀 Maizzle - Framework for rapid email prototyping with Tailwind CSS.
- 🌍 Tailwind Cheat Sheet - Tailwind CSS class names cheat sheet.
- 🌍 Tailwind Cheat Sheet (⭐35k) - Tailwind CSS class names in one single file.
- 🌍 Tailwind Cheat Sheet - Tailwind CSS class names, variants and directives cheat sheet.
Starters & Themes
- 📟 Create React App with PurgeCSS (⭐30) - CRA script that adds Tailwind CSS and PurgeCSS.
- 📟 Laravel Preset (⭐14) - Adds Tailwind CSS to the Laravel framework.
- 📟💼 Laravel Front-end Preset (⭐1.1k) - Front-end preset using Tailwind CSS for Laravel.
- 📟💼 Laravel Dark Front-end Preset (⭐42) - Dark-themed front-end preset using Tailwind CSS for Laravel.
- 🚀 Create React App with EmotionJS (⭐28) - CRA boilerplate using Tailwind CSS and Emotion JS.
- 📟 Create React App with TypeScript (⭐109) - CRA template with support for Tailwind CSS and TypeScript.
- 🚀 Tailwind CSS Boilerplate (⭐104) - Tailwind CSS boilerplate using Parcel.
- 🚀 Jekyll Starter (⭐243) - Jekyll starter using Tailwind CSS.
- 🚀 Jekyll Starter (⭐110) - Jekyll starter using Tailwind CSS.
- 🚀 Gulp Starter (⭐98) - Gulp starter using Tailwind CSS.
- 🚀 Gatsby Starter (⭐498) - Gatsby starter using Tailwind CSS.
- 🚀 Gatsby Starter Simplicity (⭐27) - Gatsby starter using Tailwind CSS.
- 🚀 Gatsby Starter + Emotion JS (⭐39) - Gatsby starter using Tailwind CSS and Emotion JS.
- 🚀 Gatsby Starter Opinionated (⭐0) - Gatsby starter using Tailwind CSS and opinionated goodies.
- 🚀 Create React App Boilerplate (⭐110) - CRA boilerplate using Tailwind CSS.
- 🚀 Create React App with PurgeCSS + Autoprefixer + CSSNano (⭐11) - CRA boilerplate using CSS Nano.
- 🚀 Dogpatch (⭐49) - WordPress starter using Webpack, Vue, Babel and Tailwind CSS.
- 🚀 Next.js Starter (⭐353) - Next.js boilerplate using Tailwind CSS.
- 🚀 Sapper & Svelte Starter (⭐79) - Svelte boilerplate using Sapper, Tailwind CSS, Purge CSS, Prettier and ESLint.
- 🚀 Netlify Lambda Starter (⭐8) - Netlify Lambda boilerplate using Tailwind CSS.
- 🚀 Hugo Theme Starter with Tailwind CSS (⭐359) - Hugo theme starter using Tailwind CSS.
- 🚀 Eleventy Web Starter (⭐312) - Starter kit using Eleventy, Tailwind CSS, Webpack and PostCSS.
- 🚀 Nanoc Starter (⭐9) - Nanoc starter using Tailwind CSS.
- 🚀 PostCSS and Browsersync Boilerplate (⭐30) - Boilerplate using CSS Nano.
- 🚀 ParcelJS + TypeScript Boilerplate (⭐8) - Boilerplate using Tailwind CSS, ParcelJS bundler and TypeScript.
- 🚀 VuePress Tailwind CSS Starter (⭐14) - A VuePress starter using Tailwind CSS.
- 🚀 Gatsby Serif (⭐29) - Gatsby's serif theme using Tailwind CSS.
- 🚀 Seminyak Hugo Theme - Hugo theme using Tailwind CSS.
Open-Source Projects
- Goodwork (⭐1.9k) - Project Management & Collaboration tool.
- Todolist (⭐142) - To-do list application using Tailwind CSS.
- LeagueStats (⭐370) - Statistics website for League of Legends players.
- SapperCommerce (⭐1.2k) - E-commerce storefront using Svelte & Tailwind CSS.
- Misiki Books (⭐16) - Book shop using Vue + Moltin + Tailwind CSS.
Learning
- 💙🧪 Plugin Examples (⭐207) - Official plugin examples.
- 🧪 Tailwind Dark Mode Theme Switcher (⭐182) - Switching themes with CSS Custom Properties and Tailwind CSS.
- 🧪 Acquia (⭐20) - Acquia's hosting dashboard rebuilt with Vue.js and Tailwind CSS.
- 🧪 Navbar - Navbar made with Vue.js and Tailwind CSS.
- 🧪 “Open” landing page (⭐124) - “Open” landing page template by Cruip built with Tailwind CSS Boilerplate.
- 🔧 Testing Tailwind CSS plugins with Jest - How to test Tailwind CSS plugins with Jest.
- 🔧 Tailwind CSS with CSS-in-JS - How to use Tailwind CSS with CSS-in-JS.
- 🔧 Tailwind CSS in a Laravel Project - How to setup Tailwind CSS in a Laravel project.
- 🔧 Sage WordPress theme and Tailwind CSS - How to setup Tailwind CSS in Sage.
- 🔧 Tailwind CSS with GatsbyJS - How to use Tailwind CSS with Gatsby.
- 🔧 Tailwind CSS with Phoenix 1.4 - How to setup Tailwind CSS in Phoenix 1.4.
- 🔧 Extend Tailwind CSS - How to Extend Tailwind CSS.
- 🎬 Rebuilding Laravel.io - Rebuilding Laravel.io with Tailwind CSS.
- 🎬 Rebuilding Coinbase - Rebuilding Coinbase with Tailwind CSS [see the Codepen].
- 🎬 Rebuilding Twitter - Rebuilding Twitter with Tailwind CSS [see the CodePen].
- 🎬 Rebuilding YouTube - Rebuilding YouTube with Tailwind CSS.
- 🎬 Rebuilding Netlify - Rebuilding Netlify with Tailwind CSS.
- 🎬 Rebuilding Resolute - Rebuilding Resolute with Tailwind CSS.
- 🎬 Let's Build: Movie Production Landing Page - Building a movie production landing page with Tailwind CSS.
- 🎬 Lets Build: Responsive Navbar - Building a responsive navbar with Tailwind CSS.
- 🎬 Let's Build: Dribbble Shot - Dribbble shot with Tailwind CSS.
- 🎬 Let's Build: Tweet component - Building a Tweet component with Tailwind CSS.
- 🎓 Modal Dialog - Creating a modal dialog with Tailwind CSS.
- 🎓 Building real-world UIs using Tailwind CSS (⭐98) - Building UIs of Shopify, Spotify, Netlify and Atlassian.
- 🎓 Login Page (PingPing) - Creating a login page with Tailwind CSS.
- 🎓 Login Page - Creating a login page with Tailwind CSS.
- 🎓 Vue.js Component with Tailwind and Laravel - Building a Vue.js component in a Laravel project.
- 🎓 Vue.js Modal - Building a customizable modal with Tailwind CSS and Vue.js.
- 🎓 Navigation - Building a navigation with Tailwind CSS.
- 🎓 Forms with Tailwind CSS - How to style a form with Tailwind CSS.
- 🎓 Photo gallery with CSS grids - Building a photo gallery with CSS grids and Tailwind CSS.
- 🎓 Rebuilding Bartik - Rebuilding Bartik (Drupal's default theme) with Vue.js and Tailwind CSS.
- 🎓 Rebuilding Airbnb's Home Page - Rebuilding Airbnb's Home Page with Tailwind CSS.