Best Projects Made With Tailwind CSS

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

Tailwindow's Color Shades
Tailwindow's Color Shades
🎨🌍🔧 - Color shades generator for Tailwind CSS.
Palette Generator
Palette Generator
🎨🌍🔧 - Color palette generator that outputs Tailwind CSS configuration files.
Tailwind Color Shades
Tailwind Color Shades
🎨🌍🔧 - Color shades generator for Tailwind CSS.
Spaced Items
Spaced Items
🛑🧩 - Adds spaced components that add fixed margins to all container items.
Spinner
Spinner
🛑🧩 - Adds a spinner component.
CSS Alpha Colors
CSS Alpha Colors
🛑🧬 - Adds opacity variants to existing colors.
Font Variant Numeric
Font Variant Numeric
🛑💼 - Adds font-variant-numeric utilities.
Cursor Extended
Cursor Extended
🛑💼 - Extends cursor utilities.
Glhd's Transitions
Glhd's Transitions
🛑💼 - Adds basic transition utilities.
Webdna's Transitions
Webdna's Transitions
🛑💼 - Adds configurable transition utilities.
Benface's Transitions
Benface's Transitions
🛑💼 - Adds configurable transition utilities, with or without CSS variables.
Transforms
Transforms
🛑💼 - Adds transform utilities.
Grid
Grid
🛑💼 - Adds CSS grids utilities.
Layout
Layout
🛑💼 - Adds some layout utilities.
Accessibility
Accessibility
🛑💼 - Adds screen reader utilities.
Object Position
Object Position
🛑💼 - Adds object-position utilities.
Object Fit
Object Fit
🛑💼 - Adds object-fit utilities.
Visually Hidden
Visually Hidden
🛑💼 - Adds screen reader utilities.
Lorisleiva's Gradients
Lorisleiva's Gradients
🛑💼 - Adds background gradient utilities.
Benface's Gradients
Benface's Gradients
🛑💼 - Adds gradient utilities.
CSS Variables
CSS Variables
🧩 - Exports configuration to CSS Custom Properties.
Colors To CSS Variables
Colors To CSS Variables
🧩 - Exports color configuration to CSS Custom Properties.
Skip Link
Skip Link
🧩 - Adds a Skip to main content accessible component.
Card
Card
🧩 - Adds card components.
Bootstrap Tables
Bootstrap Tables
🧩 - Adds table components based on Bootstrap's tables.
Responsive Embed
Responsive Embed
🧩 - Adds a responsive-embed component.
Heropatterns
Heropatterns
🧩 - Adds Hero Patterns components.
Debug Screens
Debug Screens
🧩 - Adds a component that shows the currently active screen (responsive breakpoint).
Fluid
Fluid
🧬 - Generates fl: variants.
Padded Radius
Padded Radius
🧬 - Adds variants for matching nested border radii.
Important
Important
🧬 - Adds an important variant.
Localized
Localized
🧬 - Adds variants based on the HTML lang attribute, to use utilities only with certain languages.
Alpha
Alpha
🧬 - Adds alpha color variants.
Touch
Touch
🧬 - Adds touch variants.
Direction
Direction
🧬 - Adds RTL and LTR variants.
Pseudo
Pseudo
🧬 - Adds custom variants to Tailwind CSS's configuration.
Leading Trim
Leading Trim
💼 - Adds utilities to trim text whitespace, using Capsize.
CSS Filters
CSS Filters
💼 - Adds filter and backdrop-filter utilities with defaults.
Bootstrap Grid
Bootstrap Grid
💼 - Generates Bootstrap's style flexbox grid system.
Brand Colors
Brand Colors
💼 - Adds various brand colors for background, border and text.
Background SVG
Background SVG
💼 - Inject SVGs as background images with color variants.
Bidirectional
Bidirectional
💼 - Adds utilities for creating multilingual bidirectional layouts.
Tooltip Arrows After
Tooltip Arrows After
💼 - Adds CSS utilities for tooltip arrows with configurable border and background.
CSS Logical Properties
CSS Logical Properties
💼 - Generate utilities for CSS Logical Properties.
Truncate Multiline
Truncate Multiline
💼 - Adds utilities to truncate multi-line text elements.
Scrims
Scrims
💼 - Adds scrims utilities.
Triangle After
Triangle After
💼 - Adds CSS triangles utilities.
Typography
Typography
💼 - Adds typography utilities.
Fluid
Fluid
💼 - Adds fluid sizing utilities.
List Reset
List Reset
💼 - Adds back the list-reset class that was removed prior to Tailwind CSS 1.0.