Tailwind CSS is the most modern and efficient way to design and structure web appliations. Tailwind CSS simplifies the CSS writing process and takes all the CSS standards and puts them in one place. Tailwind CSS makes creating for different platforms and screen sizes effortless. The color palette is predefined. Customizing your theme is as simple as creating a few CSS variables.
Tailwind CSS allows for transitions and animations.Tailwind CSS automatically removes all unused CSS when building for production, which means your final CSS bundle is the smallest it could possibly be.
You are stringing together several utility classes such as width, height, margins etc. This has an advantage over traditional CSS styling.
-
Utility-First: Offers great flexibility with class-based design tools.
-
Responsive Design: Build layouts that work on any device easily.
-
Customization: Tailor Tailwind's settings to your project's needs.
First we have to make sure you've added the viewport meta tag to the
of your document:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Next as you can see setting media queries is easy. First we use grid and then declare two columns. For small screens we set it for 3 columns.
<div class="grid grid-cols-2 sm:grid-cols-3">
<!-- ... -->
</div>