Your Complete Tailwind CSS Primer

CSS frameworks have changed the way developers approach web development by providing pre-built components and styles. However, many frameworks come with opinionated designs and bloated stylesheets which limit customization.



Tailwind CSS takes a different approach. As a utility-first CSS framework, it provides low-level utility classes that allow developers to build custom designs without being constrained by pre-defined components.



With over 675,375 websites using Tailwind CSS and over 8.61 million dependent repositories , Tailwind has become more than just another CSS framework.



In this article, we’ll go over understanding the concepts of Tailwind CSS, the setup process, and practical usage so you can start building your beautiful custom UIs without learning CSS.



Let’s get started!




Table of Contents
What Is Tailwind CSS? What Makes Tailwind CSS Different? Getting Started With Tailwind CSS Tailwind CSS Utility Classess Customizing The Default Classes Of Tailwind CSS Building A Simple Application In Tailwind CSS Where To Go From Here?




What Is Tailwind CSS?



Tailwind CSS is a highly customizable, low-level CSS framework that provides a set of utility classes to rapidly build custom user interfaces. It was first developed and released by Adam Wathan in 2017.



Since then, Tailwind has seen an upward trajectory in websites being built using the Tailwind library.







While the growth currently seems to have slowed as per the BuiltWith charts, the framework itself is regularly updated with new features, classes, and more.



According to BuiltWith’s tech stack data , over 100,000 websites in the US alone use Tailwind to build their user interfaces along with the UK, Indonesia, Germany, and other countries making it to the top 10 users of this library.







The core philosophy behind Tailwind CSS is to provide developers with a set of building blocks rather than pre-built components. These building blocks are small, single-purpose utility classes that can be combined to create complex and responsive layouts.



This approach allows for greater flexibility and control over the design, as you can customize every aspect of your UI without being limited by the framework’s opinionated styles.



What Makes Tailwind CSS Different?



Traditionally, when working with CSS, developers write custom classes in separate stylesheets to style their HTML elements. This approach can lead to large CSS files and make maintaining and updating styles across a project challenging.



Tailwind provides a comprehensive set of utility classes that can be applied directly to HTML elements. These classes are highly composable, allowing developers to build complex, custom designs without writing a single line of custom CSS.



For example, instead of writing a custom CSS class to style a button, you can use Tailwind’s pre-defined classes like this:



<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Button
</button>



This approach has several benefits:




Faster development : The pre-defined classes help developers rapidly build and iterate on designs without constantly switching between HTML and CSS files.



Consistent styling : Tailwind provides a standardized set of classes, which helps maintain consistency in design across a project.



Smaller CSS files : Because styles are applied directly in the HTML, there’s no need for large, custom CSS files.



Easier maintenance : With styles defined in the HTML, it’s easier to see how changes will affect a specific element without hunting through separate CSS files.



Better performance: Many modern styling systems like Emotion or Styled Components rely on javascript (usually during run-time, slower performance) to render your css. Tailwind is just CSS at the end of the day.






Tailwind turned me into a complete stack developer