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.