Project folder and Node.js activation
mkdir tailwind-demo cd tailwind-demo npm init
Install Tailwind CSS
npm install -D tailwindcss npx tailwindcss init
You will have dev dependency for tailwind and tailwind.config.css
Configure path
Change content element like below to dedicate the directory.
content: ["./src/**/*.{html,js}"],
Add Tailwind directives
Create src folder and input.css file. You will have src/input.css, then add below lines.
@tailwind base; @tailwind components; @tailwind utilities;
Tailwind CSS Watch Tool into package.json
Add this watch script into your package.json scripts section. We will start our project with this command later.
"watch": "npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch"
Create a HTML page for testing purpose
Under src folder create an index.html file, then add below lines.
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="/dist/output.css" rel="stylesheet"> </head> <body> <h1 class="text-3xl font-bold underline"> Hello world! </h1> </body> </html>
Start your project
npm run watch
Open index.html file in your browser by using LiveServer or another testing tool. You will see the page with Tailwind support. Enjoy.
http://127.0.0.1:5500/src/index.html