v3.3.2 T ilwind CSS v3.
3 Extended color p lette, ESM/TS support, nd more Docs Components Blog Showc se
Quick search... Ctrl K Inst ll tion
Document tion Get st rted with T ilwind CSS
Components T ilwind CSS works by sc nning ll of your HTML files, J v Script components, nd ny other templ tes
for cl ss n mes, gener ting the corresponding styles nd then writing them to st tic CSS file.
Templ tes
Screenc sts
It's f st, flexible, nd reli ble — with zero-runtime.
Pl yground Inst ll tion
Resources
T ilwind CLI Using PostCSS Fr mework Guides Pl y CDN
Community
Getting St rted The simplest nd f stest w y to get up nd running with T ilwind CSS from scr tch is with the
T ilwind CLI tool. The CLI is lso v il ble s st nd lone execut ble if you w nt to use it without
Inst ll tion inst lling Node.js.
Editor Setup
Using with Preprocessors
Optimizing for Production 1 Inst ll T ilwind CSS Termin l
Browser Support Inst ll `tailwindcss` vi npm, nd cre te your
`tailwind.config.js` file. npm install -D tailwindcss
npx tailwindcss init
2 Configure your templ te p ths t ilwind.config.js
Add the p ths to ll of your templ te files in
your `tailwind.config.js` file. /** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
3 Add the T ilwind directives to your CSS src/input.css
Add the `@tailwind` directives for e ch of
T ilwind’s l yers to your m in CSS file. @tailwind base;
@tailwind components;
@tailwind utilities;
St rt the T ilwind CLI build process Termin l
Run the CLI tool to sc n your templ te files for
cl sses nd build your CSS. npx tailwindcss -i ./src/input.css -o ./dist/output.css
5 St rt using T ilwind in your HTML src/index.html
Add your compiled CSS file to the `<head>` nd
st rt using T ilwind’s utility cl sses to style your ctype html>
content. >
>
eta charset="UTF-8">
eta name="viewport" content="width=device-width, initial-scal
ink href="/dist/output.css" rel="stylesheet">
ad>
y>
1 class="text-3xl font-bold underline">
Hello world!
1>
y>
ml>
Wh t to re d next
Get f mili r with some of the core concepts th t m ke T ilwind CSS different from
writing tr dition l CSS.
Utility-First Fund ment ls Responsive Design
Using utility-first workflow to build complex Build fully responsive user interf ces th t d pt to
components from constr ined set of primitive ny screen size using responsive modifiers.
utilities.
Hover, Focus & Other St tes D rk Mode
Style elements in inter ctive st tes like hover, Optimize your site for d rk mode directly in your
focus, nd more using condition l modifiers. HTML using the d rk mode modifier.
Reusing Styles Customizing the Fr mework
M n ge duplic tion nd keep your projects Customize the fr mework to m tch your br nd nd
m int in ble by cre ting reus ble bstr ctions. extend it with your own custom styles.
Copyright © 2023 T ilwind L bs Inc. Tr dem rk Policy
