Tailwind is a popular choice among frontend developers due to its customizability, reusability, and effectiveness in developing flexible and lively websites. With its pre-built classes, customization became easier than ever! You have to write less code, which saves your time and improves your efficiency and workflow! Instead of creating a class yourself, you can use a class that’s already created for you!
There is a lot of documentation for you to go through and find your desired class. But as a beginner, that costs a lot of time. Mastering some essential classes can boost your workflow and save you time searching for specific styles.
In this article, we will talk about 10 must-use tailwind class types.
Beware! To understand and use Tailwind CSS, you must have a good knowledge of Vanila CSS.
How to Install :
You can use CLI if you are a beginner. For production, you can install Tailwind according to the framework you are working on.
For detailed instructions, read the documentation.
https://tailwindcss.com/docs/installation
How To Use :
Add the class attribute in any element (className in JSX Files) and add the name of the classes.
Class Types With Examples
Here are the class types that you can use in your project frequently
1. Container : It is used to center the contents of any element and sets a maximum width, making it responsive. Class : “container”
Example:
For JSX
<div className="container mx-auto"></div>
For HTML
<div class="container mx-auto"></div>
2. Text Size : Used to control the font size of any text element. Sometimes works on icons too.
Class Name: “text-sm”, “text-lg”, “text-2xl”, “text-3xl”, “text-4xl” up to “text-7xl”
Example :
<p class="text-lg">This is large text</p>
You can use other classes mentioned above in place of “text-lg” to match your needs.
Use “className” instead of “class” in JSX Files.
3. Margin : Adds space around any elements. Based on where you want to put the margin, you can use the following classes. m- [amount of margin] ( adds space around the whole element. All 4 sides. )
“mx”: Adds space to the x-axis of the element. Left and Right)
“my” : Adds space to top and bottom or y axis of the element)
“ml” : Adds space to the left of the element.
“mr” : Adds space to the right of the element.
“mt “: Adds space to the top of the element.
“mb” : Adds space to the bottom of the element.
Example :
<div class="m-4">Margin on all sides</div>
<div class="mx-4">Margin on left and right</div>
<div class="my-4">Margin on top and bottom</div>
<div class="ml-4">Margin on left</div>
<div class="mr-4">Margin on right</div>
<div class="mb-4">Margin on bottom</div>
<div class="mt-4">Margin on top</div>
Use “className” instead of “class” in JSX Files
4. Padding : Adds Space inside of any elements. Based on where you want to add padding, you can use the following classes –
“p”: Adds Padding on all sides
“px” : Adds Padding to the x-axis of the element. Left and Right)
“py” : Adds Padding to top and bottom or y axis of the element)
“pl” : Adds Padding to the left of the element.
“pr” : Adds Padding to the right of the element.
“pt” : Adds Padding to the top of the element.
“pb” : Adds Padding to the bottom of the element.
Example :
<div class="p-4">Padding on all sides</div>
<div class="px-4">Padding on left and right</div>
<div class="py-4">Padding on top and bottom</div>
<div class="pl-4">Padding on left</div>
<div class="pr-4">Padding on right</div>
<div class="pb-4">Padding on bottom</div>
<div class="pt-4">Padding on top</div>
Use “className” instead of “class” in JSX Files
5. Flexbox: If you are familiar with Vanilla CSS and Layouts. You already know that Flexbox is a One Dimensional Layout model from CSS. It Handles the layout in one direction at a time, either row or column.
These are the common and most used classes from Flexbox
“flex”: makes the container a flex container.
“flex-{direction}”: specifies the direction of flex elements (row, row-reverse, column, column-reverse).
“justify-{content}”: Flexible elements are aligned along the primary axis (left, center, right, or space-between).(Works for Grid Layout too)
“align-items”: Positions flex items along the cross-axis (top, bottom, or center). (Works for grid layout too.)
“flex-wrap”: Allows objects to wrap across multiple lines if they do not fit in a single row or column.
Example :
<div class="flex flex-row justify-between items-center flex-wrap h-52">
<div>Item 1</div>
<div>>Item 2</div>
<div>Item 3</div>
</div>
Use “className” instead of “class” in JSX Files.
6. Grid : Grid is a Vanila CSS layout model like Flexbox. But what makes it different is that it is a 2-dimensional layout. Which means it can handle both rows and columns at a time. Tailwind made it easy for you to make a layout with grid model with these prebuilt classes Below –
“grid”: Converts the container to a grid container.
“grid-cols-{n}”: Indicates how many columns are present in the grid (e.g., grid-cols-3 for three columns).
“grid-rows-{n}”: Indicates the number of rows in the grid (for example, grid-rows-2 for two rows).
“gap-{size}”: Specifies the distance between grid items (for example, gap-4 for a 1rem gap).
“col-span-{n}”: Indicates the number of columns an element is meant to span (e.g., col-span-2 for spanning two columns).
“The row-span-{n}”: specifies the number of rows that an item should span (e.g., row-span-2 for spanning two rows).
Example :
<div class="grid grid-cols-3 grid-rows-2 gap-4 col-span-2 row-span-2">
Spans two columns and two rows
</div>
7. Height and Width : In CSS, you have to write height and width to the particular class of a particular element for adjusting the height and width. With Tailwind, you can simply just write “h-{n}” and w-{n} in the class to adjust the height and width of that element.
Example :
<div class="h-32 w-32 bg-blue-300">Height: 8rem, Width: 8rem</div>
8. Background Colour : Giving a background colour to any div or button is much easier with Tailwind because instead of creating a class in a CSS file and adding the attributes there, you can just type this: “bg-{colourname}-{depth}
Example:
"bg-blue-500"
<div class = “bg-blue-500”> This Div has blue as its background colour <div>
9. Text Colour : To make your website look great, adding colours on text is an important aspect. You can simply write “text-{colour}-{depth} in the class attribute of any element and give your desired text colour.
Example:
“text-red-500”
<div class = “text-red-500”> The text elements of this Div has red colour <div>
10. Text Alignment : Sometimes you may need to align your texts to a direction. Tailwind made it easy for you. Just write “text-{alignment direction} to achieve your desire alignment.
Example:
“text-center”
<p class=”text-center>The texts of this paragraph is center aligned</p>
Emperal Tech Is At Your Service 24/7 !
Tailwind CSS is a versatile and efficient web development solution that makes it simple to build stunning and responsive websites quickly. Emperal Tech uses Tailwind’s utility-first approach to build websites that are both practical and visually appealing.
Developers may increase productivity and streamline projects by knowing important Tailwind classes, whether they are web development, mobile apps, or software solutions. Our mission at Emperal Tech is to help you learn, improve, and move forward in the run of advanced technologies. We also provide IT services with the latest technologies to help your business survive in today’s digital world. Let us assist you in developing a strong online presence and achieving your goals!
