Zero to Hero: Tailwind CSS Edition
About Tailwind:
Tailwind CSS is a utility first CSS framework. What makes this framework unique from its alternatives like Bootstrap and Materialize CSS, is its set of CSS helper classes which helps to make customised components with more ease. Unlike Bootstrap and Materialize CSS, Tailwind is not a UI kit rather it deals on the lower level of CSS with its custom classes architecture.
Getting Started:
There are several ways to get started with the Tailwind CSS depending upon the framework you use. Tailwind comes with integration with various frontend frameworks like React, Vue and Laravel. You can check out the Installation guide from their website. For starters, we are going to use the Online Playground to explore more about tailwind classes.
Styling in Tailwind CSS
Unlike other CSS frameworks, Tailwind doesn't come with predefined components and hence you need to style every component from scratch just like in conventional CSS way using tailwind’s utility classes.
We will start by designing a button component and exploring all the basic classes used for styling a component in Tailwind CSS. So, let's head over to the online playground and get started.
Styling Button Component
<button class="bg-indigo-500 p-2 text-white font-semibold rounded hover:bg-indigo-700 ">Tailwind Button</button>We have used the following utility classes:
- bg-indigo-500: to use indigo as our background colour for the button.
- p-2: to give padding of 0.5 rem.
- text-white: to give white colour to our text.
- font-semibold: to use a semibold font.
- rounded: to have rounded corners for the button.
- hover:bg-indigo-700: change the colour of the button while hovering over it.
Styling Alert Component
<div class="flex justify-center p-2 bg-red-500 space-x-5 items-baseline">
<span class="rounded-full bg-white p-2 px-4 font-bold text-red-500">!</span>
<p class="text-white font-semibold">Warning you're about to win a lottery</p>
</div>We have used to parent div to make this alert component and flex two components inside it. Utility classes used to make this component are:
- flex: Used to flex components row-wise.
- justify-center: used to place components at the centre of the parent div.
- space-x-5: adds 1.25 rem of space between the components in the x-axis.
- items-baseline: to place both the components at the baseline of the parent div.
Conclusion:
This was an overview of the Tailwind CSS and getting started with it. This blog will help you understand the basic architecture and how to use Tailwind CSS in your project. Next up will be more interactive and intensive components styling using tailwind. Till then, stay tuned.
