Best Projects Made With Tailwind CSS

A collection of websites and examples built with Tailwind CSS - the CSS framework

Scroll Behavior
Scroll Behavior
💼 - Adds scroll-smooth and scroll-auto classes to control smooth scrolling.
Vechai UI
Vechai UI
📚 - High-quality accessible React components with the built-in dark mode using Tailwind CSS.
Tailwind Gradient Generator
Tailwind Gradient Generator
🎨🌍🔧 - Create perfect Tailwind CSS gradients with zero lines of code.
New-tailwind-app
New-tailwind-app
📟 - Creates React.js, Next.js, Gatsby.js, Vue3, Laravel, and basic Tailwind CSS apps.
Next.js PWA
Next.js PWA
📟 – CLI that generate boilerplate code of Next.js PWA along with Tailwind CSS integration.
Tailwind Elements
Tailwind Elements
📚 - Huge collection of free components, mobile-friendly thanks to Bootstrap 5.
Tailwind Cheat Sheet
Tailwind Cheat Sheet
🌍 - Tailwind CSS class names in a searchable page.
Gust
Gust
💼 - Drag and drop page builder for WordPress.
Downwind CSS Text Decoration
Downwind CSS Text Decoration
💼 - Adds composable text-decoration utilities.
Gatsby Starter + TypeScript
Gatsby Starter + TypeScript
🚀 - Gatsby starter using Tailwind CSS and TypeScript.
Tailwind CSS Figma Plugin
Tailwind CSS Figma Plugin
💼 - Figma plugin that integrates Tailwind CSS.
Tailwind CSS Figma Kit
Tailwind CSS Figma Kit
💼 - Figma Kit for Tailwind CSS.
Jekyll Landing Website Starter
Jekyll Landing Website Starter
🚀 - Production ready, SEO-friendly, performant landing website boilerplate using Jekyll and Tailwind CSS.
Create A Responsive Navigation Menu In Tailwind CSS
Create A Responsive Navigation Menu In Tailwind CSS
🎓
Typographic Defaults In Tailwind CSS
Typographic Defaults In Tailwind CSS
🎓
Tailwind CSS: From Zero To Production
Tailwind CSS: From Zero To Production
💙🎬 - Complete walkthrough of Tailwind CSS, from installation to optimization for deployment.
Web2Tailwind
Web2Tailwind
🔧 - How to build web components with Tailwind CSS with AlpineJS.
Ubuntu 20.04
Ubuntu 20.04
An Ubuntu desktop using React.js + Tailwind CSS.
Resume
Resume
📁 - A stylized resume template built with Tailwind CSS, featuring a nifty hero-pattern background and custom font.
Litepie Date Picker
Litepie Date Picker
🧩 - A date range picker component for Vue.js and Tailwind CSS.
Mamba UI
Mamba UI
🧩 - Free Tailwind CSS components, sections and templates.
Kometa UI Kit
Kometa UI Kit
🧩 - Free multi-purpose UI kit, built with Tailwind CSS.
WickedBlocks
WickedBlocks
🧩 - Collection of more than 120 layout blocks and components built with Tailwind CSS.
Themes.dev
Themes.dev
🧩📁 - Handcrafted, free and premium Tailwind CSS themes and components.
Tailwind Cards
Tailwind Cards
🧩 - Growing collection of text/image cards.
EasyTailwind
EasyTailwind
📁 - Freemium, easily customizable templates made with Tailwind CSS.
Create-tailwind-plugin
Create-tailwind-plugin
🔧 - Plugin scaffolder for Tailwind CSS.
@ngneat/tailwind
@ngneat/tailwind
💼 - Tailwind CSS integration for Angular.
Tailwindcss-rails
Tailwindcss-rails
💼 - Gem for using Tailwind CSS with Rails' asset pipeline.
Windy
Windy
🔼 - Browser extension to convert HTML elements to Tailwind CSS.
Updrafts.app
Updrafts.app
🌍 - Advanced online no-code drag and drop editor for Tailwind CSS.
Brands-tail-color
Brands-tail-color
🌍🔧 - Configuration generator using various brands' colors.
Twind
Twind
🌍🔧💼 - Compiler functions that turn Tailwind's classes into CSS at run, serve and build time.
Babel-plugin-tailwind-dark
Babel-plugin-tailwind-dark
🎨🔧💼 - A Babel plugin to add custom dark class when compiling your code using Babel.
CSS Variables
CSS Variables
🧩 - Exports custom CSS variables (Dark Mode supported).
Pseudo Selectors
Pseudo Selectors
🧬 - Adds variants for the pseudo-classes and pseudo-elements that Tailwind CSS doesn't have by default.
Marker
Marker
🧬 - Provides utilities for styling lists and <summary> markers.
Accent Color
Accent Color
💼 - Adds accent color utilities.
No Scrollbar
No Scrollbar
💼 - Exposes scrollbar-none to visually hide a scrollbar.
Content Placeholder
Content Placeholder
💼 - Adds utilities for content placeholder images.
Downwind CSS Easings
Downwind CSS Easings
💼 - Extends transition-timing-function utilities.
Scrollbar Hide
Scrollbar Hide
💼 - Adds scrollbar-hide class for visual hide scrollbar.
Text Decoration Color
Text Decoration Color
💼 - Adds text-decoration-color utilities.
Bidirectional
Bidirectional
💼 - Replace the core utilities to be bi-direction compatible.
Caret Color
Caret Color
💼 - Adds caret color utilities.
Line Clamp
Line Clamp
💙💼 - Provides utilities for visually truncating text after a fixed number of lines.
Just-in-time
Just-in-time
💙 - Just-in-time compiler for Tailwind CSS.
Daisy UI
Daisy UI
🧩 - Themeable UI components library.
Starter Dashboard Layout
Starter Dashboard Layout
🚀 - Dashboard layout using Tailwind CSS and Alpine JS.
Petra
Petra
📁 - Free landing page template built with Nuxt.js & Tailwind CSS.