# Getting started with Tailwind CSS in React Before diving right into setting up TailwindCSS, let us take a look at vanilla CSS and how it progressed into the library in question today. We know **CSS (Cascading Style Sheets)** is a styling language used to describe the presentation of a document written in a markup language. **Vanilla CSS** refers to the use of plain or "pure" CSS, without any additional frameworks or libraries. It means using the basic features of CSS to style and layout web pages, without relying on pre-defined classes or components from frameworks such as Bootstrap. This allows for complete control over the design and layout of the web page, and the ability to create custom styles that are not limited by the conventions of a specific framework. Vanilla CSS can be more flexible than using a framework, but it also requires more time and effort to create and maintain. **SASS (Syntactically Awesome Style Sheets)** is a CSS pre-processor that extends the capabilities of CSS by adding features such as variables, functions, and nested rules. It is a scripting language that is compiled into standard CSS, which is then interpreted by web browsers. One of the main advantages of using SASS over plain CSS is the ability to use variables. This allows developers to store values such as colors, font sizes, and spacing in a single location, making it easy to update and maintain the design. SASS also provides nested rules, which allow developers to group related styles together and make the code more readable and organized among many other added features. Around four years later, we saw another major shift with the introduction of Bootstrap and other CSS frameworks. **Bootstrap** was developed by Twitter and is now maintained by a team of developers at Twitter and on GitHub. Bootstrap provides a pre-defined set of CSS classes and JavaScript plugins that can be used to quickly create responsive, mobile-first web pages with a consistent design. It includes a grid system, typography, forms, buttons, navigation, and other common web page elements. While it is very effective and significantly increases development time, Bootstrap is considered "rigid" because it follows a strict set of design conventions and requires developers to use its predefined classes and markup in order to achieve a consistent look and feel across all web pages that use it. This can make it difficult to customize the design or add custom styles that deviate from the predefined Bootstrap conventions. All of this while keeping in mind that Bootstrap also provides variables and custom class options where developers can customize the design with their own CSS or SASS. While Bootstrap gave us a very high-level solution to writing scalable and maintainable CSS, TailwindCSS goes one step lower to give us utility classes to eliminate the rigidity of Bootstrap. ### Tailwind - Utility first CSS framework > Tailwind CSS is a utility-first CSS framework that allows developers to quickly create custom designs for their web pages. It provides a set of low-level CSS classes that can be composed to create complex designs. Unlike traditional CSS frameworks, Tailwind CSS does not provide pre-designed UI components. Instead, it focuses on providing a wide range of utility classes that can be used to style text, spacing, layout, and other visual elements. These classes are designed to be composable, meaning that developers can easily create new designs by combining different classes together. The framework also provides a set of configuration options that allows developers to **customize the design** by defining their own colors, typography, spacing, and other design variables. Tailwind CSS is particularly useful for creating **consistent designs** across multiple web pages, as it provides a large set of low-level utility classes that can be used to create a wide variety of visual styles. It also helps to keep the CSS code clean and maintainable because it is using a set of well-organized and pre-defined classes, it also helps to keep the specificity low, which is a good practice for maintainable CSS. Tailwind CSS is considered a good example of **abstraction** in that it provides a high-level set of utility classes that abstract away the complex details of CSS styling. It abstracts away the need to write CSS for common design elements such as typography, spacing, and layout, allowing developers to focus on the unique aspects of their designs. Additionally, Tailwind's utility-first approach provides a consistent naming convention for classes, which makes it easier for developers to understand and use the framework. ### Install Tailwind CSS with Create React App The official tailwind guide for a React App is pretty self-explanatory, you can find it here - [https://tailwindcss.com/docs/guides/create-react-app](https://tailwindcss.com/docs/guides/create-react-app) It was easy to set up with the instructions provided. Although, despite the clear instructions we do end up making mistakes. A couple of things to note, in case your CSS is not reflecting: * Make sure to add the package in the dependencies and not dev dependencies * The content path in the config should have the path to all your files And you should see the given CSS classes reflecting on your web page! A good place to get started would be the layout - [https://tailwindcss.com/docs/container](https://tailwindcss.com/docs/container) ### Frontend Mentor Challenge - I recently attempted my hand at a [frontend mentor challenge](https://www.frontendmentor.io/challenges/sunnyside-agency-landing-page-7yVs3B6ef) with Typescript, React and TailwindCSS. Find the repository here - [Github](https://github.com/jainayushee/sunny-agency-landing-page) All the best!