Tailwind is a CSS framework that is used to rapidly build custom UI. It provides all the necessary building blocks for creating a highly customizable and beautiful UI with reduced tendency to write CSS code. Using Tailwind CSS allows us to build complex responsive layout which is much easier.
Steps:
1. Download VS code and Nodejs
2. Open VS code and create a new HTML file
3. Open the terminal and type ” npm install -D tailwindcss ” and ” npx tailwindcss init” to create tailwind.config.js file. Inside this file, add ‘*’ inside content.
4. Include the script <script src=”https://cdn.tailwindcss.com”></script> inside head tag and begin to style your HTML content.
After completing this setup, we can begin to include our styling inside the html document. The advantage of using Tailwind CSS is production of only CSS which are being used thus, reducing the CSS file size resulting in a document that is without code splitting. There are a wide variety of class names and CSS properties provided in the framework for layout, spacing, border, flexbox & grid, typography, sizing, transitions & animation, interactivity, backgrounds, tables, transforms and many more which allows us to create attractive website. Although all these properties are featured in the framework, a huge plus point in using Tailwind CSS would be the feature of adding your own custom styles in Tailwind.
Some might get overwhelmed by Tailwind CSS at the beginning however we can simply lookup for the CSS property in the official website of the framework: Tailwind CSS – Rapidly build modern websites without ever leaving your HTML. Or there is also the option of a cheat sheet for it at Tailwind CSS Cheat Sheet (tailwindcomponents.com)
The best way to learn Tailwind CSS is through project. After learning about the basics, dive right into the project to better familiarize yourself with using Tailwind. Whenever you are stuck, you can always research the internet to solve the problem you are stuck at or seek help from a mentor. The more we use Tailwind CSS, the more we get confidence in building a more attractive and creative UI.
It will look something like this
