Tailwind CSS4 Installation (NPM)

Before you start, make sure you have installed Node.js and npm. You can check if 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。

In China, using npm can be very slow. You can use the Taobao-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

This way you can use the cnpm command to install modules:

$ cnpm install [name]

For more information, please refer to:http://npm.taobao.org/。

Install Tailwind CSS

Compared with Tailwind CSS 3, Tailwind CSS 4 automatically detects files such as HTML and JavaScript, saving you the hassle of manually configuring content sources.

npm Installation

The simplest and fastest way to use Tailwind CSS from scratch is through the Tailwind CLI tool.

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

npm install tailwindcss @tailwindcss/cli

1. Import Tailwind in CSS: Add the following to your CSS file @import "tailwindcss";。

For example, import it at the top of the src/input.css file:

src/input.css file

@import "tailwindcss";

2. Start the Tailwind CLI build process: Run the CLI tool to scan for classes in your source files and build your CSS.

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

3. Start using Tailwind in your HTML: Add the compiled CSS file to your <head>, and start using Tailwind's utility classes to style your content.

src/index.html file

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

Install as a Vite plugin

Vite is a modern front-end build tool designed to provide a fast development experience by leveraging native ES module support in modern browsers.

For more details about Vite, please refer to:Vite Tutorial。

Installing Tailwind CSS as a Vite plugin is the most seamless way to integrate it with frameworks such as Laravel, SvelteKit, React Router, Nuxt, and SolidJS.

1. Install Tailwind CSS

Install tailwindcss and @tailwindcss/vite via npm:

npm install tailwindcss @tailwindcss/vite

2. Configure the Vite plugin

In the Vite configuration filevite.config.tsadd the @tailwindcss/vite plugin:

vite.config.ts file

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

3. Import Tailwind CSS

In your CSS file, add@importto import Tailwind CSS:

@import "tailwindcss";

4. Start the build process

Run the build process usingnpm run devor other commands you have configured in your package.json file:

npm run dev

5. Start using Tailwind in your HTML

Make sure the compiled CSS is included in your <head> (the framework may handle this automatically), then start using Tailwind's utility classes to style your content.

Example

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

Install as a PostCSS plugin

Installing Tailwind CSS as a PostCSS plugin allows you to seamlessly integrate it with frameworks such as Next.js and Angular.

1. Install Tailwind CSS

Install tailwindcss, @tailwindcss/postcss, and postcss via npm.

npm install tailwindcss @tailwindcss/postcss postcss

2. Add Tailwind to your PostCSS configuration

In your project's postcss.config.mjs file (or anywhere PostCSS is configured), add @tailwindcss/postcss.

postcss.config.mjs file

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  }
}

3. Import Tailwind CSS

Add an @import to your CSS file to import Tailwind CSS.

@import "tailwindcss";

4. Start the build process

Run the build process using npm run dev or other commands you have configured in your package.json file.

npm run dev

5. Start using Tailwind in your HTML

Make sure the compiled CSS is included in your <head> (the framework may handle this automatically), then start using Tailwind's utility classes to style your content.

Example

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