247 lines
12 KiB
HTML
247 lines
12 KiB
HTML
<!--lint disable awesome-heading awesome-github double-link no-dead-urls-->
|
||
<p align="center">
|
||
<br> <img width="100" src="./assets/logo.svg" alt="Tailwind CSS logo">
|
||
<br> <br>
|
||
</p>
|
||
<h2 align="center">
|
||
Awesome Tailwind CSS
|
||
</h2>
|
||
<p align="center">
|
||
<a href="https://tailwindcss.com">Tailwind CSS</a> is a utility-first
|
||
CSS framework for rapidly building custom user interfaces. <br> <br>
|
||
<a href="https://github.com/sindresorhus/awesome">
|
||
<img src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg" alt="Awesome badge">
|
||
</a> <a href="https://github.com/sindresorhus/awesome-lint">
|
||
<img src="https://github.com/aniftyco/awesome-tailwindcss/workflows/Lint/badge.svg" alt="Lint status badge">
|
||
</a> <br> <br>
|
||
</p>
|
||
<h2 id="contents">Contents</h2>
|
||
<ul>
|
||
<li><a href="#useful-links">Useful links</a></li>
|
||
<li><a href="#ide-extensions">IDE extensions</a></li>
|
||
<li><a href="#tools">Tools</a></li>
|
||
<li><a href="#ui-libraries-components--templates">UI libraries,
|
||
components & templates</a></li>
|
||
<li><a href="#plugins">Plugins</a></li>
|
||
</ul>
|
||
<h2 id="useful-links">Useful links</h2>
|
||
<p><strong>Legend</strong>: 💙 Official resource</p>
|
||
<ul>
|
||
<li>💙 <a href="https://tailwindcss.com">Website</a> - Official Tailwind
|
||
CSS website.</li>
|
||
<li>💙 <a
|
||
href="https://github.com/tailwindcss/tailwindcss">Repository</a> -
|
||
Official Tailwind CSS repository.</li>
|
||
<li>💙 <a href="https://tailwindcss.com/plus">Tailwind Plus</a> - UI
|
||
blocks, templates, and a UI kit by the Tailwind CSS team.</li>
|
||
<li>💙 <a href="https://github.com/tailwindlabs/headlessui">Headless
|
||
UI</a> - Completely unstyled, fully accessible UI components.</li>
|
||
<li>💙 <a href="https://heroicons.com/">Heroicons</a> - Beautiful,
|
||
hand-crafted SVG icons.</li>
|
||
<li>💙 <a href="https://play.tailwindcss.com/">Play</a> - Advanced
|
||
online playground for Tailwind CSS.</li>
|
||
<li>💙 <a href="https://tailwindcss.com/discord">Discord</a> - Official
|
||
Discord server to connect with other community members about Tailwind
|
||
CSS.</li>
|
||
<li><a href="https://tailwindweekly.com/">Tailwind Weekly</a> - Weekly
|
||
newsletter about all things Tailwind CSS.</li>
|
||
</ul>
|
||
<h2 id="ide-extensions">IDE extensions</h2>
|
||
<p><strong>Legend</strong>: 💙 Official resource</p>
|
||
<ul>
|
||
<li>💙 <a
|
||
href="https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss">Intellisense
|
||
for Code</a> - Provides IntelliSense in Visual Studio Code.</li>
|
||
<li><a href="https://github.com/merrickluo/lsp-tailwindcss">LSP support
|
||
for Emacs</a> - LSP support for Emacs.</li>
|
||
<li><a
|
||
href="https://github.com/theron-wang/VS2022-Editor-Support-for-Tailwind-CSS">Editor
|
||
support for VS2022</a> - IntelliSense, linting, sorting, and more in
|
||
Visual Studio 2022.</li>
|
||
</ul>
|
||
<h2 id="tools">Tools</h2>
|
||
<p><strong>Legend</strong>: 🌍 Accessible online · 🌐 Browser extension
|
||
· 🔼 Conversion or upgrade tool · 🔧 Generator · 🅰 Typing/enforcement ·
|
||
💼 Plugins/Tools/Extensions for external services · 🎨 Color-related ·
|
||
🚀 Framework</p>
|
||
<ul>
|
||
<li>💙💼 <a
|
||
href="https://github.com/tailwindlabs/prettier-plugin-tailwindcss">Prettier
|
||
plugin</a> - Official Tailwind CSS plugin for Prettier.</li>
|
||
<li>🎨🌍🔧 <a href="https://uicolors.app/create">UI colors</a> - Color
|
||
palette generator for Tailwind CSS.</li>
|
||
<li>🎨🌍🔧 <a
|
||
href="https://javisperez.github.io/tailwindcolorshades">Tailwind Color
|
||
Shades</a> - Color shades generator for Tailwind CSS.</li>
|
||
<li>🎨🌍🔧 <a href="https://tailwind.ink/">TailwindInk</a> - AI palette
|
||
generator, trained with the Tailwind CSS palette.</li>
|
||
<li>🎨🌍🔧 <a href="https://hypercolor.dev/">Hypercolor</a> - Collection
|
||
of Tailwind CSS gradients with directional options.</li>
|
||
<li>🎨🌍🔧 <a href="https://www.tints.dev/">Tints</a> - Color palette
|
||
generator and API for Tailwind CSS.</li>
|
||
<li>🎨🌍🔧 <a href="https://fullwindcss.com/">Fullwind CSS</a> - Extend
|
||
Tailwind CSS color palettes with additional shades.</li>
|
||
<li>🎨🌍🔧 <a href="https://www.inclusivecolors.com/">Inclusive
|
||
colors</a> - Create fine-tuned WCAG accessible Tailwind CSS color
|
||
palettes.</li>
|
||
<li>🔼🌍 <a
|
||
href="https://github.vue.tailwind-prefix.cbass.dev">Prefixer</a> -
|
||
Tailwind classes’ prefixer tool.</li>
|
||
<li>🔼 <a href="https://github.com/avencera/rustywind">RustyWind</a> -
|
||
CLI tool for sorting Tailwind CSS classes.</li>
|
||
<li>🚀 <a href="https://maizzle.com/">Maizzle</a> - Framework for rapid
|
||
email prototyping with Tailwind CSS.</li>
|
||
<li>💼 <a
|
||
href="https://github.com/nuxt-community/tailwindcss-module"><span
|
||
class="citation"
|
||
data-cites="nuxtjs/tailwindcss">@nuxtjs/tailwindcss</span></a> -
|
||
Tailwind CSS module for NuxtJS with PurgeCSS and modern CSS (preset env
|
||
1).</li>
|
||
<li>💼 <a
|
||
href="https://github.com/rails/tailwindcss-rails">tailwindcss-rails</a>
|
||
- Gem for using Tailwind CSS with Rails’ asset pipeline.</li>
|
||
<li>💼 <a href="https://github.com/rogden/tailwind-config-viewer">Config
|
||
viewer</a> - Local UI tool for visualizing your Tailwind CSS
|
||
configuration file.</li>
|
||
<li>💼 <a href="https://www.raycast.com/vimtor/tailwindcss">Raycast
|
||
extension</a> - Search classes, documentation and colors in Raycast
|
||
Launcher.</li>
|
||
<li>💼 <a href="https://www.nativewind.dev">NativeWind</a> - NativeWind
|
||
uses Tailwind CSS as scripting language to create a universal style
|
||
system for React Native.</li>
|
||
<li>🌐 <a
|
||
href="https://chromewebstore.google.com/detail/gimli-tailwind/fojckembkmaoehhmkiomebhkcengcljl">Gimli
|
||
Tailwind</a> - Smart tools for Tailwind CSS as a browser extension.</li>
|
||
<li>🌐 <a href="https://www.cssvariables.com">CSS Variables Editor</a> -
|
||
AI-powered Chrome extension for managing colors in daisyUI and
|
||
shadcn/ui.</li>
|
||
<li>🌐 <a href="https://divmagic.com">DivMagic</a> - Copy any web
|
||
element and style as Tailwind CSS component.</li>
|
||
</ul>
|
||
<h2 id="ui-libraries-components-templates">UI libraries, components
|
||
& templates</h2>
|
||
<p><strong>Legend</strong>: 💙 Official resource · 📚 UI library · 🧩
|
||
Copy-pastable components · 📁 Full templates</p>
|
||
<ul>
|
||
<li>💙🧩 <a
|
||
href="https://tailwindcss.com/plus/ui-blocks/marketing">Tailwind UI</a>
|
||
- Component library made with Tailwind CSS.</li>
|
||
<li>💙📚 <a href="https://headlessui.com/">Headless UI</a> - Completely
|
||
unstyled, fully accessible UI components.</li>
|
||
<li>💙📁 <a href="https://tailwindcss.com/plus/ui-kit">Catalyst</a> -
|
||
Beautiful, accessible application UI kit for React.</li>
|
||
<li>🧩 <a href="https://ui.shadcn.com">shadcn UI</a> - Re-usable
|
||
components built using Radix UI and Tailwind CSS.</li>
|
||
<li>🧩 <a href="https://layoutsfortailwind.lalokalabs.dev">Layouts for
|
||
Tailwind</a> - Layouts and UI patterns for Tailwind CSS.</li>
|
||
<li>🧩 <a href="https://merakiui.com">Meraki UI Components</a> -
|
||
Beautiful Tailwind CSS components that support RTL languages.</li>
|
||
<li>🧩 <a href="https://kitwind.io/products/kometa/components">Kometa UI
|
||
Kit</a> - Free multi-purpose UI kit, built with Tailwind CSS.</li>
|
||
<li>🧩 <a href="https://hyperui.dev">HyperUI</a> - Open source marketing
|
||
and ecommerce Tailwind CSS components.</li>
|
||
<li>🧩 <a href="https://www.ripple-ui.com">Ripple UI</a> - Clean, modern
|
||
and beautiful Tailwind CSS components.</li>
|
||
<li>🧩 <a href="https://devdojo.com/pines">Pines UI</a> - Alpine and
|
||
Tailwind CSS UI library.</li>
|
||
<li>🧩 <a href="https://kokonutui.com/">Kokonut UI</a> - Collection of
|
||
modern, interactive customizable UI components.</li>
|
||
<li>🧩 <a href="https://8bitcn.com">8bitcn UI</a> - Re-usable retro
|
||
components built using Shadcn UI and Tailwind CSS.</li>
|
||
<li>🧩 <a href="https://github.com/xtendui/xtendui">Xtend UI</a> -
|
||
Tailwind CSS components with advanced interactions and animations.</li>
|
||
<li>🧩 <a href="https://tremor.so">Tremor</a> - React library to build
|
||
charts and dashboards with Tailwind CSS.</li>
|
||
<li>📚 <a href="https://github.com/saadeghi/daisyui">Daisy UI</a> - UI
|
||
Components for Tailwind CSS.</li>
|
||
<li>📚 <a
|
||
href="https://flowbite.com/docs/getting-started/introduction/">Flowbite</a>
|
||
- Component library built with Tailwind CSS.</li>
|
||
<li>📚 <a href="https://stdf.design">STDF</a> - Mobile web component
|
||
library based on Svelte and Tailwind CSS.</li>
|
||
<li>📚 <a href="https://preline.co">Preline UI</a> - Open-source
|
||
Tailwind CSS components library for any needs.</li>
|
||
<li>📚 <a href="https://github.com/themesberg/tailwind-datepicker">Date
|
||
picker</a> - Adds a datepicker component built with Tailwind CSS and
|
||
vanilla JavaScript.</li>
|
||
<li>📁 <a href="https://www.builtatlightspeed.com/">Built at
|
||
lightspeed</a> - Massive directory of 500+ Tailwind templates, starters
|
||
and UI kits.</li>
|
||
<li>📁 <a
|
||
href="https://github.com/justboil/admin-one-vue-tailwind">Admin One Vue
|
||
3</a> - Free Vue.js 3 Tailwind CSS admin template with Vite & Vue
|
||
CLI support.</li>
|
||
<li>📁 <a
|
||
href="https://github.com/justboil/admin-one-react-tailwind">Admin One
|
||
React</a> - Free React.js Tailwind CSS admin template with Next.js &
|
||
TypeScript.</li>
|
||
<li>📁 <a
|
||
href="https://github.com/themesberg/flowbite-admin-dashboard">Flowbite
|
||
Admin Dashboard</a> - Open-source admin dashboard template built with
|
||
Tailwind CSS and Flowbite.</li>
|
||
<li>📁 <a href="https://github.com/fortezhuo/fortezhuo.my.id">Astro
|
||
Template Resume</a> - Eye-catching resume template built with Astro,
|
||
Tailwind CSS.</li>
|
||
<li>📁 <a
|
||
href="https://github.com/chrismwilliams/astro-theme-cactus">Astro
|
||
Template Cactus</a> - Tailwind CSS Astro starter template.</li>
|
||
<li>📁 <a href="https://github.com/JustGoodUI/ovidius-astro-theme">Astro
|
||
Template Ovidius</a> - Tailwind CSS & Astro blog template.</li>
|
||
<li>📁 <a href="https://github.com/JustGoodUI/dante-astro-theme">Astro
|
||
Template Dante</a> - Tailwind CSS & Astro blog/portfolio
|
||
template.</li>
|
||
<li>📁 <a
|
||
href="https://statichunt.com/tailwind-templates">Statichunt</a> - Open
|
||
source directory of hand-picked free and premium Tailwind templates
|
||
& starters.</li>
|
||
</ul>
|
||
<h2 id="plugins">Plugins</h2>
|
||
<p><strong>Legend</strong>: 💙 Official plugin · 🎨 Theming · 💼
|
||
Utilities · 🧩 Components · 🛑 Deprecated</p>
|
||
<ul>
|
||
<li>💙🧩 <a
|
||
href="https://github.com/tailwindlabs/tailwindcss-typography">Typography</a>
|
||
- Adds a <code>prose</code> class for beautiful typographic
|
||
defaults.</li>
|
||
<li>💙 <a
|
||
href="https://github.com/tailwindlabs/tailwindcss-forms">Forms</a> -
|
||
Adds better default styles to form elements.</li>
|
||
<li>🎨 <a
|
||
href="https://github.com/RyanClementsHax/tailwindcss-themer">Themer</a>
|
||
- Adds theming support for Tailwind CSS with CSS variables and
|
||
variants.</li>
|
||
<li>💼 <a
|
||
href="https://github.com/karolis-sh/tailwind-bootstrap-grid">Bootstrap
|
||
grid</a> - Generates Bootstrap’s style flexbox grid system.</li>
|
||
<li>💼 <a
|
||
href="https://github.com/TheNaubit/tailwind-dot-grid-backgrounds">Dot
|
||
& grid backgrounds</a> - Adds <code>bg-grid</code> and
|
||
<code>bg-dot</code> classes to add easy-to-customize grid and dot
|
||
pattern backgrounds with just CSS.</li>
|
||
<li>💼 <a
|
||
href="https://github.com/stormwarning/tailwindcss-capsize">Leading
|
||
Trim</a> - Adds utilities to trim text whitespace, using <a
|
||
href="https://github.com/seek-oss/capsize">Capsize</a>.</li>
|
||
<li>💼 <a
|
||
href="https://github.com/reslear/tailwind-scrollbar-hide">Scrollbar
|
||
Hide</a> - Adds <code>scrollbar-hide</code> class for visual hide
|
||
scrollbar.</li>
|
||
<li>💼 <a
|
||
href="https://github.com/the-lemonboy/tailwindcss-px-to-viewport">px to
|
||
viewport</a> - Adds utilities to automatically convert px to vw /
|
||
vh.</li>
|
||
<li>💼🧩 <a href="https://github.com/barvian/fluid-tailwind">Fluid</a> -
|
||
Adds fluid <code>clamp()</code> versions of every built-in utility.</li>
|
||
<li>🧩 <a
|
||
href="https://github.com/jorenvanhee/tailwindcss-debug-screens">Debug
|
||
screens</a> - Adds a component that shows the currently active screen
|
||
(responsive breakpoint).</li>
|
||
</ul>
|
||
<p align="center">
|
||
<br /> <br /> · <br /> <br /> <sub>Contributions welcome! Read the
|
||
<a href="CONTRIBUTING.md">contribution guidelines</a> first.</sub>
|
||
</p>
|
||
<p><a
|
||
href="https://github.com/aniftyco/awesome-tailwindcss">tailwindcss.md
|
||
Github</a></p>
|