Start by setting up your project directory like this:
telwindTest/
│
├── src/
│ ├── input.css // Tailwind CSS input file
│ └── output.css // Tailwind CSS output file (generated after build)
│
├── index.html // HTML test page
├── package.json // Node.js project configuration
├── tailwind.config.js // Tailwind configuration
└── postcss.config.js // PostCSS configuration
Start by creating a Node.js project in your root directory:
npm init -yThis will generate a package.json file.
Install Tailwind CSS and its required dependencies:
npm install -D tailwindcss postcss autoprefixerGenerate the tailwind.config.js file:
npx tailwindcss initYour project’s tailwind.config.js should look like this:
module.exports = {
content: ["./src/**/*.{html,js}", "./index.html"],
theme: {
extend: {},
},
plugins: [],
}This ensures that Tailwind CSS scans both the index.html and files in the src directory for classes.
-
Create
src/input.cssand add the following Tailwind directives:@tailwind base; @tailwind components; @tailwind utilities;
-
The
src/output.cssfile will be generated automatically when you build the CSS.
Create a postcss.config.js file in the root directory:
touch postcss.config.jsInside, add the following configuration:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}In package.json, add a script to build Tailwind CSS:
"scripts": {
"build:css": "npx tailwindcss -i ./src/input.css -o ./src/output.css --watch"
}This script tells Tailwind to take input.css as the input, generate output.css, and watch for changes.
Create an index.html file in the root directory with the following content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind Test</title>
<link rel="stylesheet" href="./src/output.css">
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
<div class="bg-white p-8 rounded-lg shadow-lg">
<h1 class="text-3xl font-bold text-center mb-4">Hello, Tailwind!</h1>
<p class="text-gray-700 text-center">This is a test project to see if Tailwind is working properly.</p>
</div>
</body>
</html>This page uses basic Tailwind classes to test if everything is working properly.
Now, build and watch the Tailwind CSS file by running the following command:
npm run build:cssThis command will:
- Process the
src/input.cssfile. - Output the generated CSS to
src/output.css. - Automatically rebuild the CSS when any changes are detected in the source files.
Once the build is successful:
- Open
index.htmlin a browser. - You should see a styled page with a centered card that contains the text "Hello, Tailwind!".
If Tailwind is properly configured, the styles will be applied as expected.
-
No utility classes detected: If you get the warning
No utility classes were detected, check that:- Your
contentoption intailwind.config.jspoints to all relevant files (index.html,src/**/*.{html,js}). - You're using Tailwind CSS utility classes like
bg-gray-100,text-center, etc., in your HTML.
- Your
-
File paths: Double-check that the file paths in the
build:cssscript and the HTML<link>tag are correct.
-
Install Tailwind CSS:
npm install -D tailwindcss postcss autoprefixer
-
Build Tailwind CSS and watch for changes:
npm run build:css