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.
- Create a new directory:
mkdir tailwind-website
- Generate a
package.json
file:
npm init -y
- Now we can install all our required dependencies. Simply install Tailwind using the command:
npm install tailwindcss
- 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.
- 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.
- Write the build script inside
package.json
. You can name it whatever you want. I call itbuild-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:
- 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!
Top comments (0)