Tailwind CSS
Getting Started with Tailwind CSS
Tailwind CSS is a Utility first framework that helps us in styling the HTML pages without leaving the HTML file. This means you can simply add some utility classes in your HTML tags to design your pages swiftly. Tailwind CSS is an extraordinary framework that will completely change the way you write CSS in your programs. One major reason for the popularity of Tailwind CSS is its feasible workflow, as it eliminates the need of mapping the CSS to your HTML file. Nowadays, Tailwind CSS is evolving at a very fast pace.
Before TailwindCSS ...there were component libraries like Bootstrap and Material UI, to name a few. These libraries come with a set of pre-defined components. For instance, the most common (or heard of) is probably PrimaryButton.
These libraries reduce the hassle of designing elements from scratch with CSS. Most of these libraries also do an amazing job of making the components customizable by the user, so that they do not have to stick to the creator's decisions.
However, this customizability most of the time involves overwriting. For example, creating new classes to overwrite the existing styles provided by the library.
This is not a big issue per se (depending on the user, for me it is), but you still have to go with the "Do I like the way this is styled? No. Let me overwrite it" kind of flow.
Some developers may see these already made components as just what they need. But creators cannot always make something perfect for every user. Thankfully, as stated earlier, they do a great job of making the components customizable.
Then came TailwindCSS Tailwind is a utility-first CSS library. This means that they are focused on utilities. They provide utility classes like borders, colors, background colors, and so on. They don't necessarily define how your component looks. You decide that using different classes they provide.
This is why I love Tailwind. Of course, overwriting styles is still possible here, but that's very rare. The wonderful team behind the product created many classes for different needs. Without the need to overwrite, you can configure the default styles that you want the library to use in the config file. Pretty awesome right?
If any of these terms do not make sense to you just now, do not worry. We'll get into more detail as we proceed with the article.
Core Concepts
1. Utility-First Fundamentals
Utility-first frameworks provide a low-level utility class to build out custom designs within your HTML file. Utility classes are named according to their intended purpose, such that they’re easily understandable to the average person. Using a utility-first CSS framework, such as Tailwind CSS, lets you customise and access pre-existing utility classes and apply them directly to your HTML.
2. Handling Hover, Focus, and Other States
In Tailwind CSS, you can style links differently based on what state they are in (hover, active, and visited) by using the following pseudo-class modifiers:
- hover:used for a link when the user mouse is over it (e.g., hover:text-red-500, hover:underline, etc)
- active: used to style a link at the moment it is clicked (e.g., active:font-bold, active:text-indigo-500, etc)
- visited: used for a link the user has visited (e.g, visited:text-purple-500, etc)
3. Responsive Design
Tailwind allows you to build responsive designs in the same way you build the rest of your design — using utility classes. Every utility in Tailwind is also available in screen-size specific variations. For example, the .font-bold utility can be used on small screen sizes using the .sm:font-bold class, on medium screen sizes using the .md:font-bold class, on large screen sizes using the .lg:font-bold class and on extra large screen sizes using the .xl:font-bold class.
Layout
As we know there are many CSS frameworks but people always choose the fast and easy framework to learn and use in the project. we can make the layout of a very quickly nice page using Tailwind CSS layout.
1. Tailwind CSS Container
A container is used to fix the max-width of an element to match the min-width of the breakpoint. It comes very handy when content has to be displayed in a responsive manner to every breakpoint.
- mx-auto: To center the container, we use mx-auto utility class. It adjust the margin of the container automatically so that the container appears to be in center.
Syntax:
<element class="mx-auto">...</element>
- px-{size}: To add padding the container, we use px-{size} utility class. It adds horizontal padding to the container which is equal to the size mentioned.
Syntax:
<element class="px-20">...</element>
2. Tailwind CSS Box Sizing
This class accepts more than one value in tailwind CSS all the properties are covered as in class form. It is the alternative to the CSS box-sizing property. This class is used to defines how the user should calculate the total width and height of an element i.e. padding and borders, are to be included or not.
Box Sizing:
- box-border
box-content
box-border:
In this mode, the width and height properties include content, padding, and borders i.e. if we set an element’s width to 200 pixels, that 200 pixels will include any border or padding we added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements.
Syntax:
<element class="box-border">..</element>
- box-content:
This is the default value of the box-sizing class. In this mode, the width and height class include only the content. Border and padding are not included in it i.e if we set an element’s width to 200 pixels, then the element’s content box will be 200 pixels wide, and the width of any border or padding will be added to the final rendered width.
Syntax:
<element class="box-content">..</element>
Flexbox and Grid
The CSS flexbox is a vital feature to develop the frontend, there are four directions available in CSS so in tailwind CSS all the properties are covered as in class form. It is the alternative of CSS flex-direction Property for fast development of front-end.
Note: To activate the flex-direction you have to include the flex class in your element before the flex-direction class.
Flex Direction:
- flex-row
- flex-row-reverse
- flex-col
- flex-col-reverse
Tailwind CSS Grid
This class accepts more than one value in tailwind CSS all the properties are covered as in class form. It is the alternative of CSS grid-template-columns property in CSS. It is used to set the number of columns and size of the columns of the grid, here we will do the same but for fast development of front-end. The number of columns is set by the number of values given to this class.
Conclusion:
Even if you think that this framework is not suitable for creating large dedicated applications, it is worth knowing it for building quick prototypes, responsive design, interactive elements, large screens design, navigation bars etc. Once we learn its class nomenclature, including utility classes, Tailwind CSS will immediately speed up creating each project and allow you to focus on business values instead of the details of CSS styling. Among other CSS frameworks, Tailwind CSS really stands out with its ability to deliver business value quickly.