shafayeatsumit/tailwind-setup.md

## tailwind-setup.md

      
    Raw
  

              tailwind-setup.md
            
          
    Tailwind CSS Setup Guide

Prerequisites

Before you begin, make sure you have Node.js and npm (Node Package Manager) installed on your system.
Getting Started


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


Project Setup


Create Files: Inside the source folder (often named src), create two files: index.html and input.css.


Add Tailwind Directives to Main CSS File: Open your main CSS file (input.css inside the src 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 the content property. Update it as follows to include HTML and JavaScript files from the src folder:
module.exports = {
  // Other configurations...
  content: ["./src/*.{html,js}"],
};


Update package.json: Add the following scripts to your package.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" />


Building and Watching

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.
Folder Structure Example:

project-folder/
├── src/
│   ├── index.html
│   └── input.css
├── tailwind.config.js
├── dist/
│   └── output.css
├── node_modules/
├── package.json