awesome-tailwindcss
😎 Awesome things related to Tailwind CSS
https://github.com/aniftyco/awesome-tailwindcss
Last synced: 17 days ago
JSON representation
IDE extensions
- Intellisense for Code - Provides IntelliSense in Visual Studio Code.
- LSP support for Emacs - Provides IntelliSense in Emacs.
- Editor support for VS2022 - IntelliSense, linting, sorting, and more in Visual Studio 2022.
Plugins
-
Typography
- Adds a
proseclass for beautiful typographic defaults. - Forms - Adds better default styles to form elements.
- Themer - Adds theming support for Tailwind CSS with CSS variables and variants.
- Bootstrap grid - Generates Bootstrap's style flexbox grid system.
- Leading Trim - Adds utilities to trim text whitespace, using Capsize.
-
Scrollbar Hide
- Adds
scrollbar-hideclass for visual hide scrollbar. -
Fluid
- Adds fluid
clamp()versions of every built-in utility. - Debug screens - Adds a component that shows the currently active screen (responsive breakpoint).
-
Dot & grid backgrounds
- Adds
bg-gridandbg-dotclasses to add easy-to-customize grid and dot pattern backgrounds with just CSS. - px to viewport - Adds utilities to automatically convert px to vw / vh.
-
tailwind-hitslop
- Adds
hit-sloputilities to invisibly expand touch targets, like React Native'shitSlop. -
tw-fade
- Adds
fade-t/-b/-x/-yutilities that enable scroll-aware edge fading.
Tools
- TailwindInk - AI palette generator, trained with the Tailwind CSS palette.
- Hypercolor - Collection of Tailwind CSS gradients with directional options.
- Tints - Color palette generator and API for Tailwind CSS.
- Maizzle - Framework for rapid email prototyping with Tailwind CSS.
- Raycast extension - Search classes, documentation and colors in Raycast Launcher.
- Gimli Tailwind - Smart tools for Tailwind CSS as a browser extension.
- Fullwind CSS - Extend Tailwind CSS color palettes with additional shades.
- Prettier plugin - Official Tailwind CSS plugin for Prettier.
- RustyWind - CLI tool for sorting Tailwind CSS classes.
- tailwindcss-rails - Gem for using Tailwind CSS with Rails' asset pipeline.
- Config viewer - Local UI tool for visualizing your Tailwind CSS configuration file.
- Inclusive colors - Create fine-tuned WCAG accessible Tailwind CSS color palettes.
- Tailwind to Inline styles converter - Converts Tailwind CSS classes to inline styles in email templates.
- UI colors - Color palette generator for Tailwind CSS.
- FreeColorPalettes.co - Generates a 50–950 Tailwind CSS color scale from any hex color.
- Base-2 Rounding - Spacing and sizing value picker for Tailwind CSS v4's bracketless arbitrary values.
- Prefixer - Tailwind classes' prefixer tool.
- NativeWind - Uses Tailwind CSS as scripting language to create a universal style system for React Native.
- CSS Variables Editor - AI-powered Chrome extension for managing colors in daisyUI and shadcn/ui.
- DivMagic - Copy any web element and style as Tailwind CSS component.
UI libraries, components & templates
- Flowbite - Component library built with Tailwind CSS.
- Built at lightspeed - Massive directory of 500+ Tailwind templates, starters and UI kits.
- Pines UI - Alpine and Tailwind CSS UI library.
- Daisy UI - UI Components for 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 Cactus - Tailwind CSS Astro starter template.
- Astro Template Ovidius - Tailwind CSS & Astro blog template.
- Astro Template Dante - Tailwind CSS & Astro blog/portfolio template.
- Tailwind UI - Component library made with Tailwind CSS.
- Headless UI - Completely unstyled, fully accessible UI components.
- Catalyst - Beautiful, accessible application UI kit for React.
- Kokonut UI - Collection of modern, interactive customizable UI components.
- Xtend UI - Tailwind CSS components with advanced interactions and animations.
- Appica UI - Open-source React component library built on Tailwind CSS, with a matching Figma library.
- Layouts for Tailwind - Layouts and UI patterns for Tailwind CSS.
- Meraki UI Components - Beautiful Tailwind CSS components that support RTL languages.
- Ripple UI - Clean, modern and beautiful Tailwind CSS components.
- Radian UI - Accessible, customizable React components built with Tailwind CSS, with a CLI.
- shadcn UI - Re-usable components built using Radix UI and Tailwind CSS.
- HyperUI - Open source marketing and ecommerce Tailwind CSS components.
Useful links
- Heroicons - Beautiful, hand-crafted SVG icons.
- Play - Advanced online playground for Tailwind CSS.
- Tailwind Weekly - Weekly newsletter about all things Tailwind CSS.
- Headless UI - Completely unstyled, fully accessible UI components.
- Tailwind Plus - UI blocks, templates, and a UI kit by the Tailwind CSS team.
- Repository - Official Tailwind CSS repository.
- Website - Official Tailwind CSS website.