Before you begin, make sure you have Node.js and npm (Node Package Manager) installed on your system.
-
Create an Empty Folder: Begin by creating a new empty folder for your project.
-
Initialize npm Package: Open your terminal/command prompt and navigate to your project folder. Run the following command to initialize a new npm package:
npm init -y
-
Install Tailwind CSS: Install Tailwind CSS and save it as a development dependency using the following command:
npm install -D tailwindcss
-
Initialize Tailwind Configuration: Generate the default Tailwind configuration file using the following command:
npx tailwindcss init
-
Create Files: Inside the source folder (often named
src
), create two files:index.html
andinput.css
. -
Add Tailwind Directives to Main CSS File: Open your main CSS file (
input.css
inside thesrc
folder) and add the following Tailwind directives at the beginning. These directives include Tailwind's base, components, and utilities layers:/* src/input.css */ @tailwind base; @tailwind components; @tailwind utilities; /* Your custom styles go here */
-
Update Tailwind Configuration: Open the
tailwind.config.js
file and locate thecontent
property. Update it as follows to include HTML and JavaScript files from thesrc
folder:module.exports = { // Other configurations... content: ["./src/*.{html,js}"], };
-
Update
package.json
: Add the following scripts to yourpackage.json
file. These scripts will be used for building and watching changes in your Tailwind CSS:"scripts": { "build": "tailwindcss -i ./src/input.css -o ./dist/output.css", "watch": "tailwindcss -i ./src/input.css -o ./dist/output.css --watch" }
-
Link CSS in HTML: Open the
index.html
file and add the following line inside the<head>
section. This links your compiled Tailwind CSS to the HTML file:<link rel="stylesheet" href="../dist/output.css" />
To build your Tailwind CSS styles and generate the output file, run the following command in your terminal:
npm run build
To watch for changes in your CSS and automatically update the output file as you make edits, use the following command:
npm run watch
Remember to include the generated output.css
file in your HTML files to apply the Tailwind CSS styles to your project.
Now you're all set to start working with Tailwind CSS in your project! Enjoy the benefits of its utility classes and streamlined styling approach.
project-folder/
├── src/
│ ├── index.html
│ └── input.css
├── tailwind.config.js
├── dist/
│ └── output.css
├── node_modules/
├── package.json