Tailwindcss4 Installbynpm
π
2026-06-22 | π Tailwind CSS
Before you begin, make sure you have Node.js and npm installed. You can check if they are installed using the following commands:
node -v npm -v
If your system does not yet support Node.js and NPM, you can refer to our [Node.js Tutorial](httsp://www./nodejs/nodejs-tutorial.html).
If you are in China and npm download speeds are slow, you can use the cnpm command-line tool customized by Taobao (with gzip compression support) as a replacement for 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
For more information, please visit: [http://npm.taobao.org/](http://npm.taobao.org/).
* * *
## Installing Tailwind CSS
Compared to Tailwind CSS 3, Tailwind CSS 4 automatically detects HTML and JavaScript files, eliminating the need to manually configure content sources.
### npm Installation
The simplest and fastest way to start using Tailwind CSS from scratch is through the Tailwind CLI tool.
Install and configure Tailwind CSS locally in your project via npm:
npm install tailwindcss @tailwindcss/cli
**1γImport Tailwind in CSS**: Add @import "tailwindcss"; to your CSS file.
For example, import at the beginning 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 classes in your source files and build CSS.
npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch
**3γStart using Tailwind in HTML**: Add the compiled CSS file to the and start using Tailwind's utility classes to style your content.
## src/index.html file
Hello world!
### Install as a Vite Plugin
Vite is a modern frontend build tool designed to provide a fast development experience by leveraging native ES module support in modern browsers.
For more details on Vite, please refer to: (#).
Installing Tailwind CSS as a Vite plugin is the most seamless way to integrate it with frameworks like 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**
Add the @tailwindcss/vite plugin in the Vite configuration file vite.config.ts:
## vite.config.ts file
import{ defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins:[
tailwindcss(),
],
})
**3γImport Tailwind CSS**
Add @import to import Tailwind CSS in your CSS file:
@import "tailwindcss";
**4γStart the Build Process**
Run the build process using npm run dev or whatever command you have configured in your package.json file:
npm run dev
**5γStart Using Tailwind in HTML**
Make sure the compiled CSS is included in the (frameworks may handle this automatically), then start using Tailwind's utility classes to style your content.
## Example
Hello world!
### Install as a PostCSS Plugin
Installing Tailwind CSS as a PostCSS plugin allows seamless integration with frameworks like 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 PostCSS Configuration**
Add @tailwindcss/postcss in your project's postcss.config.mjs file (or wherever you configure PostCSS):
## postcss.config.mjs file
export default{
plugins:{
"@tailwindcss/postcss":{},
}
}
**3γImport Tailwind CSS**
Add @import to import Tailwind CSS in your CSS file.
@import "tailwindcss";
**4γStart the Build Process**
Run the build process using npm run dev or whatever command you have configured in your package.json file.
npm run dev
**5γStart Using Tailwind in HTML**
Make sure the compiled CSS is included in the (frameworks may handle this automatically), then start using Tailwind's utility classes to style your content.
## Example
Hello world!
YouTip