Best Projects Made With Tailwind CSS

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

GPT-3 Tailwind CSS Code Generator
GPT-3 Tailwind CSS Code Generator
🌍🔧 - OpenAI GPT-3 powered Tailwind CSS code generator.
Palettolithic
Palettolithic
🎨🌍🔧 - Generates harmonius color palettes based on one color.
Hypercolor
Hypercolor
🎨🌍🔧 - Collection of pre-configured Tailwind CSS gradients with directional options.
Grayscale Design
Grayscale Design
🎨🌍🔧 - A Luminance-based color palette generator.
TailwindInk
TailwindInk
🎨🌍🔧 - AI palette generator, trained with the Tailwind CSS palette.
Tailwind Color Explorer
Tailwind Color Explorer
🎨🌍🔧 - Color explorer for Tailwind CSS.
Tailwind Gradient Designer
Tailwind Gradient Designer
🎨🌍🔧 - Generate a gradient for Tailwind 1.7+.
Tailwind Colors
Tailwind Colors
🎨🌍🔧 - Color configuration generator for Tailwind CSS.
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.