awesome-tailwindcss

😎 Awesome things related to Tailwind CSS
https://github.com/aniftyco/awesome-tailwindcss

Last synced: 2 days ago
JSON representation

Starters & Themes
- Seminyak Hugo Theme - Hugo theme using Tailwind CSS.
- Next.js Starter - Next.js boilerplate using Tailwind CSS.
- Eleventy Web Starter - Starter kit using Eleventy, Tailwind CSS, webpack and PostCSS.
- Vite + Vue 3.x + Tailwind 2.x Starter - Starter template using Vite, Vue, Vue Router and Tailwind CSS.
- Create React App with PurgeCSS - CRA script that adds Tailwind CSS and PurgeCSS.
- Laravel Front-end Preset - Front-end preset using Tailwind CSS for Laravel.
- Laravel Dark Front-end Preset - Dark-themed front-end preset using Tailwind CSS for Laravel.
- Create React App with TypeScript - CRA template with support for Tailwind CSS and TypeScript.
- Next.js PWA
- new-tailwind-app - Creates React.js, Next.js, Gatsby.js, Vue3, Laravel, and basic Tailwind CSS apps.
- Tailwind CSS Boilerplate - Tailwind CSS boilerplate using Parcel.
- Jekyll Starter - Jekyll starter using Tailwind CSS.
- Jekyll Starter - Jekyll starter using Tailwind CSS
- Gulp Starter - Gulp starter using Tailwind CSS.
- Gatsby Starter - Gatsby starter using Tailwind CSS.
- Gatsby Starter Simplicity - Gatsby starter using Tailwind CSS.
- Gatsby Starter + TypeScript - Gatsby starter using Tailwind CSS and TypeScript.
- Gatsby Starter Opinionated - Gatsby starter using Tailwind CSS and opinionated goodies.
- Create React App Boilerplate - CRA boilerplate using Tailwind CSS.
- Create React App with PurgeCSS + Autoprefixer + CSSNano - CRA boilerplate using CSS Nano.
- Dogpatch - WordPress starter using webpack, Vue, Babel and Tailwind CSS.
- Netlify Lambda Starter - Netlify Lambda boilerplate using Tailwind CSS.
- PostCSS and Browsersync Boilerplate - Boilerplate using CSS Nano.
- ParcelJS + TypeScript Boilerplate - Boilerplate using Tailwind CSS, ParcelJS bundler and TypeScript.
- VuePress Tailwind CSS Starter - A VuePress starter using Tailwind CSS.
- Gatsby Serif - Gatsby's serif theme using Tailwind CSS.
- Vite + React + Tailwind Starter - Boilerplate using Vite, React and Tailwind CSS.
- Vite + React + TypeScript + Tailwind 3.x starter - GitHub Template for Vite, React + Tailwind 3.x + TypeScript.
- Vite + Lit + Tailwind Starter - Boilerplate using Vite, Lit and Tailwind CSS.
- Shopify Theme Lab - Shopify theme development starter using Vue and Tailwind CSS.
- Starter Dashboard Layout - Dashboard layout using Tailwind CSS and Alpine JS.
- Jekyll Landing Website Starter - Production ready, SEO-friendly, performant landing website boilerplate using Jekyll and Tailwind CSS.
- Next JS Boilerplate - Boilerplate for Next.js and Tailwind CSS.
- AstroWind - Production ready and SEO-friendly template to start a website using Astro and Tailwind CSS.
- Vue-Resume - Developer resume template with Tailwind CSS and Vue.
- Angular-Tailwind - Dashboard starter kit using Angular and Tailwind CSS.
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.
- Tailwind UI - Component library made with Tailwind CSS.
- Cruip - Beautifully designed HTML, React, and Vue.js templates.
- Catalyst - Beautiful, accessible application UI kit for React.
- Vechai UI - High-quality accessible React components with the built-in dark mode using Tailwind CSS.
- Flowbite - Open-source component library built with Tailwind CSS.
- a17t - Atomic design toolkit built to extend Tailwind CSS.
- Xtend UI - Tailwind CSS components with advanced interactions and animations.
- Headless UI Float - Floating UI integration for Headless UI.
- Vanilla Components - Set of fully customizable Vue components.
- Sailboat UI - Modern UI framework for Tailwind CSS.
- Built At Lightspeed - Massive directory of 500+ Tailwind templates, starters and UI kits.
- Statichunt - Open source directory of hand-picked free and premium Tailwind templates & Starters.
- Tailkits - Curated Tailwind CSS components, templates, UI kits, resources, tools & more.
- STDF - Mobile web component library based on Svelte and Tailwind CSS.
- TWC - Lightweight library to create reusable React + Tailwind CSS components in one line.
- 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.
- themes.dev - Handcrafted, free and premium Tailwind CSS themes and components.
- Sail UI - Collection of basic UI components built on Tailwind CSS.
- Tailwind Kit - Framework-agnostic, Vue.js, React and Angular components.
- Windstrap - Tailwind CSS with Bootstrap JS.
- Kometa UI Kit - Free multi-purpose UI kit, built with Tailwind CSS.
- Mamba UI - Free Tailwind CSS components, sections and 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.
- Sira UI - Customizable and accessible design system which provides TailwindCSS component class name library to build modern UI.
- 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.
- NativeWind - NativeWind uses Tailwind CSS as scripting language to create a universal style system for React Native.
- TailwindFlex - Free library of Tailwind CSS examples.
- Shadcn UI - Re-usable components built using Radix UI and Tailwind CSS.
- Vue Notus - Open-source Tailwind CSS and Vue.js UI kit.
- EasyTailwind - Freemium, easily customizable templates made with Tailwind CSS.
- Windmill Dashboard - Multi theme, completely accessible dashboard template.
- Landing Gradients - Landing page template using gradients (1.7+).
- VueTailwind - Vue.js UI library using Tailwind CSS.
- tails - Hand-crafted templates and components using Tailwind CSS.
- Svelte Headless UI - Unofficial Svelte port of Headless UI.
- Tailwind Cards - Growing collection of text/image cards.
- Daisy UI - UI Components for Tailwind CSS.
- Litepie Date picker - A date range picker component for Vue.js and Tailwind CSS.
- Tailwind Typeahead - Typeahead/Autocomplete component built with Vue.js and Tailwind CSS.
- Tailwind Admin - Administration panel template with Tailwind CSS.
- Resume - Simple resume with Tailwind CSS.
- Simple Light - Free landing page template built with React & Tailwind CSS.
- V-Dashboard - Dashboard starter template built with Vue 3 and Tailwind CSS.
- Tailmin - Admin dashboard built with Vue.js and Tailwind CSS.
- Admin One Vue 3 - Free Vue.js 3 Tailwind CSS admin template with Vite & Vue CLI support.
- Admin One React - Free React.js Tailwind CSS admin template with Next.js & TypeScript.
- Flowbite Admin Dashboard - Open-source admin dashboard template built with Tailwind CSS and Flowbite.
- Astro Template Resume - Eye-catching resume template built with Astro, Tailwind CSS.
- Astro Template Cactus - Tailwind CSS Astro starter template.
- Astro Template Ovidius - Tailwind CSS & Astro blog template.
- Astro Template Dante - Tailwind CSS & Astro blog/portfolio template.
- Penguin UI - Plug-n-play UI component library for Tailwind CSS & Alpine JS.
- Sira UI - Customizable and accessible design system which provides TailwindCSS component class name library to build modern UI.
- Motion Primitives - React motion components built with Tailwind CSS and Framer Motion.
- Tremor - React library to build charts and dashboards with Tailwind CSS.
- Windstatic - Set of 161 elements & layouts made with Tailwind CSS and Alpine.js.
Useful Links
- Discord - Official Discord server to connect with other community members about Tailwind CSS.
- Tailwind Weekly - Weekly newsletter about all things Tailwind CSS.
- Website - Official Tailwind CSS website.
- Repository - Official Tailwind CSS repository.
- Heroicons - Beautiful, hand-crafted SVG icons.
- Play - Advanced online playground for Tailwind CSS.
- Website - Official Tailwind CSS website.
- Repository - Official Tailwind CSS repository.
- Headless UI - Completely unstyled, fully accessible UI components.
- Repository - Official Tailwind CSS repository.
- Tailwind UI - Component library made with Tailwind CSS.
IDE Extensions
- IntelliSense for Code - Provides IntelliSense in Visual Studio Code.
- Tailwind CSS Highlight - Highlights utility classes in Visual Studio Code.
- LSP support for Emacs - LSP support for Emacs.
- CSS to TailwindCSS converter for Code - Converts CSS to Tailwind CSS in Visual Studio Code.
- Editor support for VS2022 - IntelliSense, linting, sorting, and more in Visual Studio 2022.
Plugins
- FormKit - Adds variants for input and form states for FormKit.
- Theme Variants - Adds theme variants based on media queries and/or CSS selectors.
- tailwindcss-px-to-viewport - Adds utilities to automatically convert px to vw / vh.
- Typography - Adds a `prose` class for beautiful typographic defaults.
- Container queries - Provides utilities for container queries.
- Forms - Adds better default styles to form elements.
- Theme Swapper - Theming using CSS variables, with media queries support.
- Themer - Adds theming support for Tailwind CSS with CSS variables and variants.
- CSS Variables - Exports custom CSS variables.
- Accent - Adds `accent` colors for more dynamic and flexible color utilization.
- Radix - Adds utilities and variants for styling Radix UI state.
- Image Rendering - Adds `image-rendering` utilities.
- Elevation - Adds [Material UI `elevation`](https://material.io/design/environment/elevation.html) utilities.
- RFS - Adds [`RFS`](https://github.com/twbs/rfs) utilities.
- Bidirectional - Adds utilities for creating multilingual bidirectional layouts.
- Background SVG - Inject SVGs as background images with color variants.
- Background Unsplash - Apply [unsplash.com](https://unsplash.com) images as background.
- Brand Colors - Adds various brand colors for background, border and text.
- Bootstrap Grid - Generates Bootstrap's style flexbox grid system.
- Leading Trim - Adds utilities to trim text whitespace, using [Capsize](https://github.com/seek-oss/capsize).
- Scrollbar Hide - Adds `scrollbar-hide` class for visual hide scrollbar.
- Fluid Type - Adds fluid type (`font-size`) utilities.
- Grid Areas - Adds `grid-areas` and `grid-area` utilities.
- Full bleed background and borders - Provides utilities for extended backgrounds and borders.
- CSS Filter Order - Adds `filter-order` utilities for changing the order of filters in the generated CSS.
- Tailwind CSS 3D - Adds 3D `transform` utilities and animations.
- Claymorphism - Adds `clay` utilities for creating claymorphism style.
- Fluid - Adds fluid `clamp()` versions of every built-in utility.
- Htmx - Adds variants for styling on [htmx](https://htmx.org/reference/#classes) events.
- Debug screens - Adds a component that shows the currently active screen (responsive breakpoint).
- Dot & Grid Backgrounds - Adds `bg-grid` and `bg-dot` classes to add easy-to-customize grid and dot pattern backgrounds with just CSS.
- Line Clamp - Provides utilities for visually truncating text after a fixed number of lines.
- Custom Forms - Adds better default styles to form elements.
- Aspect Ratio - Adds composable aspect ratio utilities.
- Quantity Queries - Adds variants for using quantity queries.
- Tailwind Elements - Extends Tailwind CSS with 500+ interactive components (datepickers, modals, forms, tables, darkmode).
Tools
- Ui Colors - Color palette generator for Tailwind CSS.
- Tailwind Colors - Color configuration generator for Tailwind CSS.
- Tailwind Color Explorer - Color explorer for Tailwind CSS.
- TailwindInk - AI palette generator, trained with the Tailwind CSS palette.
- Gradient Designer - Generate gradients for Tailwind 2.0+.
- Grayscale Design - A Luminance-based color palette generator.
- Hypercolor - Collection of pre-configured Tailwind CSS gradients with directional options.
- Palettolithic - Generates harmonius color palettes based on one color.
- Tailwind Gradient Generator - Create perfect Tailwind CSS gradients with zero lines of code.
- Tints - Color palette generator and API for Tailwind CSS.
- tail-animista - Configurable custom animation utilities generator for Tailwind CSS.
- brands-tail-color - Configuration generator using various brands' colors.
- Typography playground - Tool for trying different Google Fonts combinations with the Tailwind CSS typography plugin.
- Flowrift - Beautifully designed Tailwind CSS UI blocks.
- Tailwindhelper - Visualize Tailwind CSS classes and unit converter.
- Prefixer - Tailwind classes' prefixer tool.
- CSS to Tailwind CSS Converter - Converts CSS to Tailwind CSS by suggesting classes that best match.
- Maizzle - Framework for rapid email prototyping with Tailwind CSS.
- react-native-tailwindcss - React Native typing system.
- tailwindcss-vite-plugin - Vite plugin for Tailwind CSS, supports "Design in DevTools" mode and visualizes Tailwind CSS configuration.
- Raycast Extension - Search classes, documentation and colors in Raycast Launcher.
- DivMagic - Copy any web element and style as Tailwind CSS component.
- Tailwind Cheat Sheet - Tailwind CSS class names in a searchable page.
- Tailwind Grid Generator - Drag and drop Tailwind CSS grid generator.
- Tailwind Box Shadows Generator - Box Shadows generator.
- Static Tailwind - The most used Tailwind classes, precompiled, with no build step.
- Prettier plugin - Official Tailwind CSS plugin for Prettier.
- Twind - Compiler functions that turn Tailwind's classes into CSS at run, serve and build time.
- Tailwindo - Bootstrap to Tailwind CSS converter.
- RustyWind - CLI tool for sorting Tailwind CSS classes.
- Alfred Workflow - Fast Tailwind CSS documentation search application.
- vue-cli-plugin-tailwind - Vue CLI plugin that adds Tailwind CSS to a project.
- preact-cli-tailwind - Tailwind CSS integration for Preact.
- tailwindcss-rails - Gem for using Tailwind CSS with Rails' asset pipeline.
- twin.macro - Use Tailwind classes within any CSS-in-JS library.
- tailwindcss-webpack-plugin - Out-of-the-box Tailwind CSS, supports "Design in DevTools" mode and visualizes Tailwind CSS configuration.
- Tailwind Config Viewer - Local UI tool for visualizing your Tailwind CSS configuration file.
- clb - clb (class list builder) is a utility function that builds a class list based on a [Stitches](https://stitches.dev/) like API.
- twined-components - Extended component of a styled-components that prioritizes class names for use in Tailwind CSS.
- Impulse.dev
- Tailiscope.nvim - Tailwind CSS cheat sheet integrated in Neovim.
- Tailwind CSS Colors - Cheat sheet for Tailwind CSS colors.
- Tailwind Gradients - Collection of gradients using Tailwind CSS classes.
- Design GUI - AI-powered Chrome extension for managing colors in daisyUI and shadcn/ui.
- Tailwind CSS Colors - Cheat sheet for Tailwind CSS colors.
- Tailwind Gradients - Collection of gradients using Tailwind CSS classes.
- Fullwind CSS - Extend Tailwind CSS color palettes with additional shades.
- Gimli Tailwind - Smart tools for Tailwind CSS as a browser extension.
- ska-tailwind-editor - Edit Tailwind HTML as WordPress blocks with intuitive UI for Tailwind classes and get HTML or JSX back.
Learning
- Navbar - Navbar made with Vue.js and Tailwind CSS.
- 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.
- Rebuilding Laravel.io - Rebuilding Laravel.io with Tailwind CSS.
- Rebuilding Coinbase - Rebuilding Coinbase with Tailwind CSS (see the [CodePen](https://codepen.io/adamwathan/pen/RxWrZr)).
- Rebuilding YouTube - Rebuilding YouTube with Tailwind CSS.
- Rebuilding Netlify - Rebuilding Netlify with Tailwind CSS.
- Rebuilding Resolute - Rebuilding Resolute with Tailwind CSS.
- Tailwind CSS: From Zero to Production - Complete walkthrough of Tailwind CSS, from installation to optimization for deployment.
- 10 Tailwind CSS Tips and Tricks - 10 Tailwind CSS tricks you should know.
- Responsive Framer Motion with Tailwind CSS - Learn how CSS variables can bridge the gap between Framer Motion and Tailwind CSS.
- Modal Dialog - Creating a modal dialog with Tailwind CSS.
- Login Page (PingPing) - 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.
- Typographic defaults in Tailwind CSS
- Create a responsive navigation menu in Tailwind CSS
- Laracasts Weekly Stream: Tailwind
- More experimentation with Tailwind CSS
- Rebuilding Spotify
- Rebuilding Discord
- Rebuilding Meetup
- Modal Dialog - Creating a modal dialog with Tailwind CSS.
- Modal Dialog - Creating a modal dialog with Tailwind CSS.
- Modal Dialog - Creating a modal dialog with Tailwind CSS.
- Extend Tailwind CSS - How to Extend 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.
- Rebuilding Airbnb's Home Page - Rebuilding Airbnb's Home Page with Tailwind CSS.
- Modal Dialog - Creating a modal dialog with Tailwind CSS.
- Modal Dialog - Creating a modal dialog with Tailwind CSS.
- Modal Dialog - Creating a modal dialog with Tailwind CSS.
- Modal Dialog - Creating a modal dialog with Tailwind CSS.
- Plugin Examples - Official plugin examples.
- Tailwind Dark Mode Theme Switcher - Switching themes with CSS Custom Properties and Tailwind CSS.
- Acquia - Acquia's hosting dashboard rebuilt with Vue.js and Tailwind CSS.
- Tailwind CSS with Ember - How to add Tailwind CSS to an Ember application.
- Building real-world UIs using Tailwind CSS - Building UIs of Shopify, Spotify, Netlify and Atlassian.
- Modal Dialog - Creating a modal dialog with Tailwind CSS.
- Modal Dialog - Creating a modal dialog with Tailwind CSS.
- Rebuilding Spotify
- Rebuilding Discord
- Rebuilding Meetup
- Modal Dialog - Creating a modal dialog with Tailwind CSS.
- Modal Dialog - Creating a modal dialog with Tailwind CSS.
- Modal Dialog - Creating a modal dialog with Tailwind CSS.
- Modal Dialog - Creating a modal dialog with Tailwind CSS.
- Modal Dialog - Creating a modal dialog with Tailwind CSS.
- Modal Dialog - Creating a modal dialog with Tailwind CSS.
- Modal Dialog - Creating a modal dialog with Tailwind CSS.
- Modal Dialog - Creating a modal dialog with Tailwind CSS.
- Modal Dialog - Creating a modal dialog with Tailwind CSS.
- Modal Dialog - Creating a modal dialog with Tailwind CSS.
- Modal Dialog - Creating a modal dialog with Tailwind CSS.
- Modal Dialog - Creating a modal dialog with Tailwind CSS.
- Modal Dialog - Creating a modal dialog with Tailwind CSS.
- Modal Dialog - Creating a modal dialog with Tailwind CSS.
- Modal Dialog - Creating a modal dialog with Tailwind CSS.
- Modal Dialog - Creating a modal dialog with Tailwind CSS.
- Modal Dialog - Creating a modal dialog with Tailwind CSS.
- Modal Dialog - Creating a modal dialog with Tailwind CSS.
- Modal Dialog - Creating a modal dialog with Tailwind CSS.
- Modal Dialog - Creating a modal dialog with Tailwind CSS.
- Modal Dialog - Creating a modal dialog with Tailwind CSS.
- Modal Dialog - Creating a modal dialog with Tailwind CSS.
- Modal Dialog - Creating a modal dialog with Tailwind CSS.
- Modal Dialog - Creating a modal dialog with Tailwind CSS.
- Rebuilding Twitter - Rebuilding Twitter with Tailwind CSS (see the [CodePen](https://codepen.io/drehimself/full/vpeVMx)).

Programming Languages

JavaScript 41 TypeScript 28 Vue 8 HTML 8 Astro 5 CSS 4 PHP 4 Svelte 2 C# 1 Liquid 1

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

awesome-tailwindcss

Starters & Themes

UI Libraries, Components & Templates

Useful Links

IDE Extensions

Plugins

Tools

Learning