Как установить?


Tailwind CSS home page
v3.4.13
Docs
Components
Blog
Showcase
Theme
Tailwind CSS on GitHub
Quick search...
⌘K
Documentation
Components
Templates
Screencasts
Playground
Resources
Community
Getting Started
Installation
Editor Setup
Using with Preprocessors
Optimizing for Production
Browser Support
Upgrade Guide
Core Concepts
Utility-First Fundamentals
Hover, Focus, and Other States
Responsive Design
Dark Mode
Reusing Styles
Adding Custom Styles
Functions & Directives
Customization
Configuration
Content
Theme
Screens
Colors
Spacing
Plugins
Presets
Base Styles
Preflight
Layout
Aspect Ratio
Container
Columns
Break After
Break Before
Break Inside
Box Decoration Break
Box Sizing
Display
Floats
Clear
Isolation
Object Fit
Object Position
Overflow
Overscroll Behavior
Position
Top / Right / Bottom / Left
Visibility
Z-Index
Flexbox & Grid
Flex Basis
Flex Direction
Flex Wrap
Flex
Flex Grow
Flex Shrink
Order
Grid Template Columns
Grid Column Start / End
Grid Template Rows
Grid Row Start / End
Grid Auto Flow
Grid Auto Columns
Grid Auto Rows
Gap
Justify Content
Justify Items
Justify Self
Align Content
Align Items
Align Self
Place Content
Place Items
Place Self
Spacing
Padding
Margin
Space Between
Sizing
Width
Min-Width
Max-Width
Height
Min-Height
Max-Height
Size
Typography
Font Family
Font Size
Font Smoothing
Font Style
Font Weight
Font Variant Numeric
Letter Spacing
Line Clamp
Line Height
List Style Image
List Style Position
List Style Type
Text Align
Text Color
Text Decoration
Text Decoration Color
Text Decoration Style
Text Decoration Thickness
Text Underline Offset
Text Transform
Text Overflow
Text Wrap
Text Indent
Vertical Align
Whitespace
Word Break
Hyphens
Content
Backgrounds
Background Attachment
Background Clip
Background Color
Background Origin
Background Position
Background Repeat
Background Size
Background Image
Gradient Color Stops
Borders
Border Radius
Border Width
Border Color
Border Style
Divide Width
Divide Color
Divide Style
Outline Width
Outline Color
Outline Style
Outline Offset
Ring Width
Ring Color
Ring Offset Width
Ring Offset Color
Effects
Box Shadow
Box Shadow Color
Opacity
Mix Blend Mode
Background Blend Mode
Filters
Blur
Brightness
Contrast
Drop Shadow
Grayscale
Hue Rotate
Invert
Saturate
Sepia
Backdrop Blur
Backdrop Brightness
Backdrop Contrast
Backdrop Grayscale
Backdrop Hue Rotate
Backdrop Invert
Backdrop Opacity
Backdrop Saturate
Backdrop Sepia
Tables
Border Collapse
Border Spacing
Table Layout
Caption Side
Transitions & Animation
Transition Property
Transition Duration
Transition Timing Function
Transition Delay
Animation
Transforms
Scale
Rotate
Translate
Skew
Transform Origin
Interactivity
Accent Color
Appearance
Cursor
Caret Color
Pointer Events
Resize
Scroll Behavior
Scroll Margin
Scroll Padding
Scroll Snap Align
Scroll Snap Stop
Scroll Snap Type
Touch Action
User Select
Will Change
SVG
Fill
Stroke
Stroke Width
Accessibility
Screen Readers
Forced Color Adjust
Official Plugins
Typography
Forms
Aspect Ratio
Container Queries
v4.0 Beta Documentation →

Preview the next Tailwind CSS.

Installation

Get started with Tailwind CSS
Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file.

It's fast, flexible, and reliable — with zero-runtime.

Installation
Tailwind CLI
Using PostCSS
Framework Guides
Play CDN
Installing Tailwind CLI
The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool. The CLI is also available as a standalone executable if you want to use it without installing Node.js.


Install Tailwind CSS
Install tailwindcss via npm, and create your tailwind.config.js file.

Terminal

npm install -D tailwindcss
npx tailwindcss init
Configure your template paths
Add the paths to all of your template files in your tailwind.config.js file.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}
Add the Tailwind directives to your CSS
Add the @tailwind directives for each of Tailwind’s layers to your main CSS file.

src/input.css

@tailwind base;
@tailwind components;
@tailwind utilities;
Start the Tailwind CLI build process
Run the CLI tool to scan your template files for classes and build your CSS.

Terminal

npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
Start using Tailwind in your HTML
Add your compiled CSS file to the <head> and start using Tailwind’s utility classes to style your content.

src/index.html

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="./output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>
What to read next
Get familiar with some of the core concepts that make Tailwind CSS different from writing traditional CSS.

Utility-First Fundamentals
Using a utility-first workflow to build complex components from a constrained set of primitive utilities.

Responsive Design
Build fully responsive user interfaces that adapt to any screen size using responsive modifiers.

Hover, Focus & Other States
Style elements in interactive states like hover, focus, and more using conditional modifiers.

Dark Mode
Optimize your site for dark mode directly in your HTML using the dark mode modifier.

Reusing Styles
Manage duplication and keep your projects maintainable by creating reusable abstractions.

Customizing the Framework
Customize the framework to match your brand and extend it with your own custom styles.

Copyright © 2024 Tailwind Labs Inc.

Trademark Policy

GitHub
Discord