DEV Community 👩‍💻👨‍💻

Cover image for How to setup Tailwind in your project
Shreya Purohit
Shreya Purohit

Posted on

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
Enter fullscreen mode Exit fullscreen mode
  1. Generate a package.json file:
npm init -y
Enter fullscreen mode Exit fullscreen mode
  1. Now we can install all our required dependencies. Simply install Tailwind using the command:
npm install tailwindcss
Enter fullscreen mode Exit fullscreen mode
  1. Inside your project folder, create these files:
./public
./src
   ../styles.css
Enter fullscreen mode Exit fullscreen mode

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.

  1. Add custom styles for Tailwind in your source file:
/*   src/styles.css:   */
@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

Now we need to write a script that will process Tailwind classes inside our public folder.

  1. 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"
 },
Enter fullscreen mode Exit fullscreen mode

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:

  1. run the above script:
npm run build-tw

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

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!

Top comments (0)

We're hiring!

We're Hiring

We're looking for a Senior Full Stack Engineer to join the DEV team.

Head here to learn more.