Installation
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.
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 tailwindcss via npm, and create your tailwind.config.js file.
tailwindcss
tailwind.config.js
npm install -D tailwindcss npx tailwindcss init
Add the paths to all of your template files in your tailwind.config.js file.
/** @type { import ( 'tailwindcss' ) . Config } */ module . exports = { content : [ "./src/**/*.{html,js}" ] , theme : { extend : { } , } , plugins : [ ] , }
Add the @tailwind directives for each of Tailwind’s layers to your main CSS file.
@tailwind
@tailwind base ; @tailwind components ; @tailwind utilities ;
Run the CLI tool to scan your template files for classes and build your CSS.
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
Add your compiled CSS file to the <head> and start using Tailwind’s utility classes to style your content.
<head>
<! 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 >
Get familiar with some of the core concepts that make Tailwind CSS different from writing traditional CSS.
Using a utility-first workflow to build complex components from a constrained set of primitive utilities.
Build fully responsive user interfaces that adapt to any screen size using responsive modifiers.
Style elements in interactive states like hover, focus, and more using conditional modifiers.
Optimize your site for dark mode directly in your HTML using the dark mode modifier.
Manage duplication and keep your projects maintainable by creating reusable abstractions.
Customize the framework to match your brand and extend it with your own custom styles.
