Are you tired of writing CSS from scratch and spending hours tinkering with styles? Do you want to speed up your web development process without sacrificing customization? Look no further than Tailwind, the utility-first CSS framework that streamlines the styling process and puts control back in your hands. In this blog, we'll cover everything you need to know about Tailwind, from installation to customization, so you can start using it in your projects right away.
Installation
The installation process is pretty straightforward. The documentation for tailwind covers that pretty well. There's an official Tailwind VSCode extension that provides intellisense for tailwind classes. There's also a prettier plugin that helps to sort and reorder tailwind classes.
With Tailwind, you style elements by applying pre-existing classes directly in your HTML.
What is Tailwind?
Tailwind is a library that allows you to style your elements in HTML itself. How does that work? Well, tailwind has some utility classes that have predefined styles. All you have to do is add those classes to your HTML elements.
Examples
Let's say there's a button you want to style with some colors and some round borders. The CSS would look something like this:
button {
color: green;
background-color: greenyellow;
padding: 1rem 1.25rem;
border-radius: 4rem;
border: green 2px solid;
}
button:hover {
color: white;
background-color: green;
}
Here's how you would do this in tailwind. First, let's add the colors. Now tailwind provides a. We'll choose the one that matches our style lime-500
. To use the color as background color, just use bg-lime-500
.
Now for margins and paddings, tailwind provides some convention. To add margin across all directions use m-value
. For example, m-4
will apply 1 rem
of margin across all directions. Use mx-value
to apply margin-left and margin-right only. Similarly use my-value
to apply margins across top and bottom directions. You can use mt-value
, mb-value
, ml-value
and mr-value
to apply margins across the top, bottom, left and right directions. (Padding works in a similar manner, just use p-value
instead of m-value
and so on.)
For border-radius, we'll use rounded-full
. I highly recommend checking out the tailwind docs for reference. Here's what your tailwind style will look like.
<button class=
"px-5 py-4
lime-500 bg-lime-500 text-lime-900
border-2 border-lime-900 border-solid">
Styled with Tailwind
</button>
Handling Pseudo Selectors
Tailwind makes it very easy to handle pseudo-selectors. All you need to do is to append the name of the pseudo selector followed by :
before your class name. So focus:bg-lime-900
would change the color of our button on focus and so on.
<button class=
"px-5 py-4
lime-500 bg-lime-500 text-lime-900
border-2 border-lime-900 border-solid
hover:bg-lime-900 hover:text-neutral-50">
Styled with Tailwind
</button>
Responsiveness
Adding some responsiveness to your website is easier than ever. Tailwind comes with 5 different screen sizes. These are sm
(<640px), md
(<768px), lg
(<1024px), xl
(<1280px) and 2xl
(<1536px).
To change the color of the button when the screen size gets smaller than 640px, we can add sm:bg-red-500
.
Customizations
- ### Spacing
Remember when I mentioned that m-4
will apply 1 rem of margin across your element? Well, that is the default behavior. You can customize your spacing by modifying the tailwind config file. (If you don't have a tailwind config file, just create one: tailwind.config.js
.
/* tailwind.config.js */
module.exports = {
theme: {
spacing: { '2': '1rem', '4': '2rem' }
}
}
Now m-2
, p-2
and so on will use 1 rem instead of 0.5 rem and m-4
, p-4
and so on will use 4 rem instead of 2 rem. You can use any CSS unit.
- ### Colors
Similar to spacing, you can add your own colors too by modifying the tailwind config file. You can also specify weights as shown below.
/* tailwind.config.js */
module.exports = {
theme: {
colors: {
primary: '#F2921D',
secondary: '#F2CD5C',
accent: '#BFDB38',
purple: {
100: '#EBC7E6', /* different */
200: '#BFACE2', /* shades of */
300: '#A084DC', /* purple */
400: '#645CBB'
}
}
}
};
Now we can use our colors in tailwind class names, like bg-primary
or text-purple-300
and so on.
- ### Screens
You can modify the screen size for responsiveness as shown below:
module.exports = {
theme: {
screens: {
sm: '480px',
md: '768px',
}
};
You can customize other properties like border-radius, font family and so on. Refer to the docs.
Thank you for reading.
Author: Samyabrata Maji
Top comments (0)