Introduction
Tailwind CSS is a very interesting framework of CSS. In which we do not have code or make any other CSS file for our HTML website or for any React JS project. We have to just important or link certain file online links into our HTML file and we can directly use Tailwind CSS with it. It is a class-based framework like bootstrap. We have to just mention the style in our class portion and the CSS will be applied. If you learn and master this amazing framework you will never regret it. Now let's talk about certain CSS frameworks other than Tailwind:-
- Bootstrap
- Foundation
- Bulma
- UIkit
- Semantic UI
- Susy
- Materialize
These are the highly used frameworks aka main frameworks. If you want to learn basic PHP for web development then you can watch this video:-
Why use Tailwind CSS?
The main reasons for using Tailwind CSS are:-
- No reinventing of class names required
- Your CSS doesn't grow with your HTML and designs
- When you make a change, no risk of breaking the existing template or design of the website.
- If you try to build the site from pure CSS it will be more difficult for you as I mentioned earlier.
- It will not increase the bundle size of your website as the CSS classes are already hosted on some domains.
- Your website will be light and responsive if you code the classes accordingly.
Inclusion/Installation of tailwind CSS
Via NPM
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
run this command in your node JS app in the terminal to install Tailwind CSS in your Node/React JS project
Via CDN
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
Through these ways, you can simply install and use Tailwind CSS in your projects.
Inline CSS and tailwind CSS difference
When you are using Tailwind CSS utility classes these classes are specially designed to make responsive and catchy websites. These are totally different from the inline CSS. These classes are totally different from inline CSS. Inline CSS increases the site weight and makes the site bulky and heavy as the home HTML file has an enormous amount of code in it. Which is also not a good practice for professional web development.
Inline CSS secure the bytes in your HTML file and increases the file size but tailwind CSS is hosted on a server(CDN) with the pre-defined utility classes and these HTML size doesn't increase well it has a draw-back that you require Internet every time you are running your website in development mode on your computer.
Example of Tailwind CSS:-
<h1 class="font-bold mx-2 my-2 text-3xl">This is an example</h1>
Just by adding classes like this you can style your website, refer to the above example. The code is clean and very understandable.
Conclusion
Tailwind CSS is a very interesting and useful framework for web developers. Well, you can't control every aspect according to your wish by using this framework. It has some limitations as I mentioned earlier. It has many properties and one of them is the letter-spacing Property which is very useful. You have to install other libraries also along with Tailwind CSS primary library to work with it professionally and easily. It is extremely easy to learn and master. You can even master it in one week if you practice every day and keep on revising the topics again and again. It has thousands of pre-defined classes, so if you ask me you should definitely learn this framework if you are a web developer. You can easily control font sizes and all essential things with it.
Hope you like this article comment down below your thoughts about this amazing framework.