Tailwind CSS Installation (NPM)

Before you begin, make sure you have Node.js and npm installed. You can check whether they are installed by running the following commands:

node -v
npm -v

If your system does not yet support Node.js and npm, you can refer to ourNode.js Tutorial。

Using npm in China can be very slow. You can use Taobao's customized cnpm command-line tool (with gzip compression support) instead of the default npm:

$ npm install -g cnpm --registry=https://registry.npmmirror.com
$ npm config set registry https://registry.npmmirror.com

Then you can use the cnpm command to install modules:

$ cnpm install [name]

For more information, see:http://npm.taobao.org/。

Install Tailwind CSS 3

This chapter covers the installation method for Tailwind CSS 3. The installation method for Tailwind CSS 4 has changed; it automatically detects files such as HTML and JavaScript, saving you the trouble of manually configuring content sources.
For details, see:Tailwind CSS 4 Installation。

Install via npm: install and configure Tailwind CSS in your local project:

npm install -D tailwindcss
npx tailwindcss init

After running the above command, a basic configuration file tailwind.config.js will be generated for customization.

Configure template paths

Next, we can add the template paths in the tailwind.config.js file:

tailwind.config.js file code:

/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"], // Adjust according to the actual file types in your project
theme: {
extend: {},
},
plugins: [],
}

Add the Tailwind directives to your CSS file

In your main CSS filesrc/input.css(create it if you don't have one), add each Tailwind feature module using the @tailwind directive.

src/input.css file code:

@tailwind base;
@tailwind components;
@tailwind utilities;

Start the Tailwind CLI build process

Run the CLI tool to scan the template files for classes and build the CSS.

npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

Use Tailwind in HTML

Add the compiled CSS file to the <head> tag, and then you can start using Tailwind's utility classes to style your content.

src/index.html file code:

<!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>

The above steps apply to most modern front-end projects, whether using Vue, React, or other frameworks. Make sure that the compiled CSS file is included during the build process so that Tailwind CSS styles can be correctly applied to your project.

Using PostCSS

Installing Tailwind CSS as a PostCSS plugin is the best way to integrate seamlessly with build tools such as webpack, Rollup, Vite, and Parcel.

1. Install Tailwind CSS

Install Tailwind CSS and its related dependencies via npm, and generate the tailwind.config.js configuration file.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

2. Add Tailwind to your PostCSS configuration

In the project's postcss.config.js file, add the tailwindcss and autoprefixer plugins.

postcss.config.js file code:

module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}

3. Configure template paths

In the tailwind.config.js file, add the paths of all template files so that Tailwind CSS can generate the required styles based on these files.

tailwind.config.js file code:

/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"], // Replace with the actual template paths in your project
theme: {
extend: {},
},
plugins: [],
}

4. Add the Tailwind directives to your CSS file

In your main CSS file, add the following three core Tailwind directives to import base styles, component styles, and utility class styles.

main.css file code:

@tailwind base;
@tailwind components;
@tailwind utilities;

5. Start the build process

Start the project build process using npm run dev or the relevant commands configured in the package.json file.

npm run dev

6. Use Tailwind CSS in HTML

Make sure the compiled CSS file is correctly included in the <head> tag (some frameworks may do this automatically), then start using the utility classes provided by Tailwind CSS in your HTML to style your content.

index.html file code:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/dist/main.css" rel="stylesheet"> 
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>

Other Extensions