How to setup Tailwind in your project

Tailwind is a utility-first framework consisting of various classes to help you build clear and responsive designs fast inside HTML markup file. In this post, you will learn how to set up tailwind in you project step-by-step.

1. Create a new directory:

mkdir tailwind-website

2. Generate a package.json file:

npm init -y

3. Now we can install all our required dependencies. Simply install Tailwind using the command:

npm install tailwindcss

4. Inside your project folder, create these files:

./public
./src
   ../styles.css

Our project will have two stylesheets, one inside public folder, which will contain all the Tailwind classes we talked about earlier. To get this, we'll make use of our second CSS file which is in the src folder.

5. Add custom styles for Tailwind in your source file:

/*   src/styles.css:   */
@tailwind base;
@tailwind components;
@tailwind utilities;

Now we need to write a script that will process Tailwind classes inside our public folder. 6. Write the build script inside package.json. You can name it whatever you want. I call it build-tw:

 "scripts": {
 "build-tw": "tailwindcss build src/styles.css -o public/styles.css"
 },

src/styles.css → source css file

public/styles.css → output css file

The final step is to run the script. Simply open your terminal and run the command: 7. run the above script:

npm run build-tw

# runs tailwind and generate the output css file 
# (public/styles.css) where all our css lies.

And it's done. Check out the file public/styles.css which was empty before. All the Tailwind CSS utilities can be now found in public/styles.css.

That's all for this one. Let me know if you've any doubts. Thank you for reading!