Text Shadow
Finally, `text-shadow` utilities are here. Use classes from text-shadow-2xs to text-shadow-lg to add shadows to your text.
CSS Masks
Apply image or gradient masks using the new mask-* utilities for creative visual effects.
Colored Drop Shadows
You can now apply colored drop shadows using theme colors, like drop-shadow-indigo-500.
New Variants
Includes new variants for different states, like targeting input devices with pointer-* and any-pointer-*, or styling for when JavaScript is disabled with noscript.
High-Performance Engine
A ground-up rewrite in Rust results in significantly faster build times (up to 10x faster) and a smaller installation size.
CSS-First Configuration
Configure your theme and add custom utilities directly in your CSS using @theme, eliminating the need for a `tailwind.config.js` file.
Automatic Content Detection
Tailwind now automatically discovers your template files, so no `content` configuration is needed in most projects.
Modern Web Features
Built-in support for container queries, a vivid P3 color palette, and native CSS variables for all design tokens.
Utility-First
Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs without writing any custom CSS.
Responsive Design
Use responsive utility variants to build adaptive user interfaces. For example, use md:text-center to apply the text-center utility at medium screen sizes and above.
Hover, Focus, & Other States
Tailwind includes modifiers for different states like hover, focus, active, and more. For example, hover:bg-blue-700.
Container
Display
.block, .inline-block, .inline, .flex, .grid, .hidden
Position
.static, .relative, .absolute, .fixed, .sticky
Flex Direction
.flex-row, .flex-row-reverse, .flex-col, .flex-col-reverse
Justify Content
.justify-start, .justify-end, .justify-center, .justify-between, .justify-around
Grid Template Columns
.grid-cols-1, .grid-cols-2, ..., .grid-cols-12
Padding
p-0, p-1, p-2, ..., p-96
px-4
py-2
Margin
m-0, m-1, m-2, ..., m-96
mx-auto
-mt-4
Width
w-auto, w-full, w-screen, w-1/2, w-64
Height
h-auto, h-full, h-screen, h-1/2, h-64
Font Size
.text-xs, .text-sm, .text-base, .text-lg, .text-xl, .text-2xl
Font Weight
.font-light, .font-normal, .font-medium, .font-bold
Text Color
.text-gray-500, .text-red-500, .text-blue-500
Background Color
.bg-gray-200, .bg-blue-500, .bg-transparent
Gradient Colors
.bg-gradient-to-r
.from-purple-400
.to-pink-500
Border Width
.border, .border-2, .border-t-4
Border Color
.border-gray-300, .border-indigo-500
Border Radius
.rounded-none, .rounded, .rounded-full
Transition Property
.transition-all, .transition-colors, .transition-opacity
Transition Duration & Timing
.duration-300, .duration-500, .ease-in-out, .ease-linear
Animation
.animate-spin, .animate-ping, .animate-pulse, .animate-bounce
Scale
.scale-95, .scale-100, .scale-105, .scale-x-50
Rotate & Translate
.rotate-45, .-rotate-90, .translate-x-12, -translate-y-4
Skew & Origin
.skew-x-12, .-skew-y-6, .origin-center, .origin-top-right
Cursor
.cursor-pointer, .cursor-wait, .cursor-not-allowed
Pointer Events
.pointer-events-none
.pointer-events-auto
User Select
.select-none, .select-text, .select-all
Filter
.blur-md, .brightness-125, .contrast-150, .grayscale
Backdrop Filter
Apply filters to the area behind an element. Enable with backdrop-filter.
.backdrop-blur-sm, .backdrop-brightness-50, .backdrop-saturate-150
Box Shadow
.shadow-sm, .shadow-md, .shadow-lg, .shadow-inner, .shadow-none
Opacity
.opacity-0, .opacity-25, .opacity-50, .opacity-75, .opacity-100
Blend Mode
.mix-blend-multiply, .bg-blend-screen