How to configure Tailwind by npm?
1. Set Up a New Project
Open your terminal in the VS Code project directory or create a new project.
For a new Node.js project:
mkdir my-tailwind-project
cd my-tailwind-project
npm init -y
2. Install Tailwind CSS via npm
Install Tailwind CSS and its dependencies with the following command:
npm install -D tailwindcss postcss autoprefixer
3. Create Configuration Files
Generate tailwind.config.js and postcss.config.js by running:
npx tailwindcss init -p
This will generate:
tailwind.config.js: Tailwind configurationpostcss.config.js: PostCSS configuration for processing CSS
4. Set Up the Content Paths
Open tailwind.config.js and define the content paths to your files (HTML, JS, etc.):
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
5. Create Your CSS File
Create a CSS file in your project directory (e.g., src/input.css) and import Tailwind’s base, components, and utilities:
mkdir -p src
touch src/input.css
Add this to src/input.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
6. Build Tailwind CSS
Add the build command to your package.json. This will process your CSS and generate the final output.
How about this: “Open your package.json file and add the following script:
"scripts": {
"build:css": "tailwindcss -i ./src/input.css -o ./dist/output.css --watch"
}
7. Create HTML File
You can create an HTML file in the src directory to use Tailwind classes. Example:
touch src/index.html
Sample content for src/index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="../dist/output.css" rel="stylesheet">
<title>Tailwind CSS Setup</title>
</head>
<body class="bg-gray-100 text-center">
<h1 class="text-3xl font-bold text-blue-500">Hello Tailwind CSS!</h1>
</body>
</html>
8. Build and Watch for Changes
Run the following command to build Tailwind CSS and watch for changes:
npm run build:css
This command will:
- Read your
src/input.css - Process it through Tailwind and PostCSS
- Output the final CSS into
dist/output.css
9. Install VS Code Extensions
(Optional but recommended):
- Tailwind CSS IntelliSense: Autocompletes and offers helpful hints for Tailwind classes.
10. Use Live Server
To view your HTML changes in real-time, you can use the Live Server extension or run a simple server using the terminal:
npx live-server src
This will start a local server, allowing you to view changes instantly in your browser as you modify your Tailwind CSS.
conclusion – This installs Tailwind CSS, along with PostCSS and Autoprefixer, as development dependencies. After installing, you can configure and build your CSS files by setting up the necessary configuration files (tailwind.config.js and postcss.config.js) and using the appropriate build scripts. This process integrates Tailwind CSS into your project for streamlined utility-first CSS styling.
