Scribd
Upload
96 views

Installation - Tailwind CSS

The document discusses how to get started with Tailwind CSS, an utility-first CSS framework. It outlines the steps to install Tailwind via npm, configure template paths, add Tailwind directives to CSS files, run the Tailwind CLI to build styles, and start using Tailwind utilities in HTML.

Uploaded by

ibereola2906
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
96 views

Installation - Tailwind CSS

The document discusses how to get started with Tailwind CSS, an utility-first CSS framework. It outlines the steps to install Tailwind via npm, configure template paths, add Tailwind directives to CSS files, run the Tailwind CLI to build styles, and start using Tailwind utilities in HTML.

Uploaded by

ibereola2906
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

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

You might also like