How to configure Tailwind CSS simple way in your VS code.

Why i have choosen to write this blog means few days ago i have faced so difficult in VS Code how to configure Tailwnd CSS in this bolg we can nail down to configure tailwind CSS.

Step-1

First step you need to type Tailwind CSS install command line in your current work folder terminal in VS Code.

npm install -D tailwindcss

Second step for Tailwind custom configuration purpose you need to type below command in your current work folder terminal in VS Code.

npx tailwindcss init

you can able to see tailwind.config.js in your project file.

Configure which file you want to link to Tailwind CSS in tailwind.config.js content area same way you can link all files.

content: ["layouts/*/.{html}"]

Add Tailwind directives to your Main CSS file there you can write custom CSS to your file.

@tailwind base;
@tailwind components;
@tailwind utilities;

To watch your tailwind CSS code Type below command in your current project cli(Command Line Interface). it turns to the actual CSS code.

Make sure your file path is correct

npx tailwindcss -i tailwind.css -o ./layouts/CSS/style.css --watch

After you can able to see the entire pre-written CSS in output CSS file

Link your output CSS file to your main .html file that's it you're successfully configured Tailwind CSS to your VS Code you're nailed it.

<link rel="stylesheet" href="./layouts/CSS/style.css">

In tailwind.config.js file you can create own custom themes like colors, screen sizes, animations etc..,
For example you want align proper heading and paragraph In tailwind provided beautiful typography plugins.

First you can install plugins npm package through cli in your current project file.

npm install -D @tailwindcss/typography

Second step open your tailwind.config.js and place your custom plugins thats it so simple hoo you learned so much about Tailwind configuration in VS Code in this article.

plugins: [
    require('@tailwindcss/typography'),
  ],

-Thank you for reading...