Firstly,
What is Tailwind CSS?
Tailwind is a CSS Framework created by Adam Wathan.
Unlike other frameworks, it does not come prebuilt with classes to add to the HTML tags.
Instead, it uses a different approach. It brings a much lower level of control by using utility-based classes.
You simply bring tiny components together to construct a UI that is unique.
** What Tailwind simply does is take a raw CSS File, processes this over a configuration file and produces and output. **
It is really helpful in creating responsive complex designs.
Check more on it's official website
Installation
Steps -
Make sure you have NodeJs installed in your system. If not download it here.
Write the following commands in the terminal opened in the specific location of the folder where to want to use/install it-
npm init -y
npm install -D tailwindcss postcss autoprefixer vite
npx tailwindcss init -p
- Create a CSS file and link it to your HTML file and edit it with the below piece of code-
@tailwind base;
@tailwind components;
@tailwind utilities;
In your "tailwind.config.js" file, replace "content:[]" with "content:["*"]"
Add/edit the following line of JSON in your "package.json".
"scripts": {
"start": "vite";
}
- Now, finally write the following in your terminal to start a Development server for running Tailwind CSS-
npm run start
Where to go now?
Now you are ready to get into Tailwind CSS. I have found some great resources for you all(latest 2022)-
Top comments (0)