TailwindCSS

If you love bootstrap and a follower of Bootstrap then forget about Bootstrap and start learning TailwindCSS 😜

What is TailwindCSS?

Tailwind is a CSS framework for implementing custom designs.Unlike many other CSS frameworks, Tailwind doesn’t include any component classes like form-input, btn,card.

Tailwind is different.

Instead of opinionated predesigned components, Tailwind provides low-level utility classes that let you build completely custom designs without ever leaving your HTML. (https://tailwindcss.com/#what-is-tailwind)

Aren’t you happy, you can stay in your HTML page and start designing your components without going to CSS. Thats the beauty of TailwindCSS.

As you can see the image, if you want to follow the CSS traditional where you need to design your HTML using style.

With Tailwind, you style elements by applying pre-existing classes directly in your HTML.

Isn’t it easier? Making designs in Inline. And it also make you easier to design the page quickly.

Let’s see how we can start TailwindCSS in a project?

1. You can install Tailwind CSS as follows :

Using npm
npm install tailwindcss

Using Yarn
yarn add tailwindcss

2. After installing you can customize your tailwindCSS for that , you need to add config file.To generate a config file in your package you needed to run the following command

npx tailwindcss init

Generated config file

You can still get the full configuration as well, but it is good to get only the config file add what are the things you wanted. This will help to decrease the unwanted things.

2 a. In-order to get the full-config, you needed to run

npx tailwindcss init — full

Lets see how we can process with config file.Using Tailwind with PostCSS
create a file called ‘postcss.config.js’ and add the following:
Generally this means adding Tailwind as a plugin in your postcss.config.js file:

module.exports = {
plugins: [

require(‘tailwindcss’),
require(‘autoprefixer’),
]
}

4. Next we need to add tailwindCSS to our css

Add a file called tailwind.css. to your CSS folder.
Use the @tailwind directive to inject Tailwind’s base, components, and utilities styles into your CSS:

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

5. Last Step

1. Go to package.json file and under script change test script to “build”:

“postcss css/tailwind.css -o public/build/tailwind.css”
— Now run npm run build
a new folder with public and sub-folder build having tailwind.css file will be created.
- Create a new file called index.html inside the public folder.

HAPPY TAILWINDCSS GUYS