Tailwind CSS is a utility first CSS framework that allows developers to design custom web components without having to switch to a CSS file. In this tutorial, you will learn how to install Tailwind CSS in React and how you can use it to create a simple React page.
Thank you for reading this post, don't forget to subscribe!
Why Use Tailwind CSS?
There are already a lot of CSS frameworks that simplify the way developers design web pages. So why should you use Tailwind CSS?
CSS frameworks such as Bootstrap and Foundation are open-sourced frameworks, which means they provide developers with pre-defined components that have default styles. This limits both customization and creativity, and you end up with websites that look normal.
However, Tailwind CSS is a utility-first framework that gives you the creative control to create dynamic components. And unlike Bootstrap, you can easily customize the design however you want.
Another advantage of using Tailwind CSS is that you end up with a smaller CSS bundle size as it removes all unused CSS during the build process (which is different from Bootstrap, as it includes all CSS files in the build). Are included).
Learn more about the difference between Tailwind CSS and Bootstrap from our article on this topic.
Disadvantages of Using Tailwind CSS
Tailwind CSS has a steep learning curve, even for experienced developers. It takes some time to learn how to fully use utility classes, and you may need to refer to the documentation often. However, once you are familiar with classes, you will find it easier and faster than plain CSS.
Most developers prefer to follow the principle of separation of concerns such that CSS and HTML files are written in separate files. With Tailwind CSS, you write CSS directly in HTML markup—a drawback for some.
Despite these disadvantages, Tailwind CSS is a framework you should seriously consider if you are already comfortable with CSS and want to create designs faster.
Getting Started: Create a React Project
Run the following command in terminal to scaffold React application using create-react-app.
create-react-app provides an easy way to build a React app without configuring build tools like Webpack, Babel or Linters. This means you end up with a working React environment within minutes.
The above command creates a new folder named react-tailwind. Navigate to the folder and open it using your favorite text editor.
PostCSS uses JavaScript plugins to make CSS compatible with most browsers. It checks the browser the application is running in and determines the polyfills you need for your CSS to work seamlessly. Autoprefixer is a PostCSS plugin that uses values from caniuse.com to automatically add vendor prefixes to CSS rules.
Initialize tailwind css
Run the tailwind init command to generate the Tailwind CSS default configuration files.
Configure template path
You need to tell Tailwind CSS it should check the files to see which CSS classes are being used. This allows Tailwind to detect and remove unused classes and therefore reduce the size of the generated CSS.
In tailwind.config.js, add the template path under the Content key.
Inject Tailwind CSS in React
The next step is to incorporate the tailwind CSS into the application using the @tailwind directive.
Delete everything in index.css and add the following to import the basic styles, components, and utilities.
This page has two main sections: a navigation bar, and a hero section (which has a title and a button).
To explain how Tailwind CSS makes it easier to write CSS, try styling a web page using plain CSS and Tailwind CSS.
Start by modifying App.js in the src folder to remove unnecessary code.
With Tailwind CSS, you don’t need to write CSS rules for each class. Instead, you use utility classes. These are classes within the scope of a CSS property. For example, if you want to create a button with a black background and white text color, you need to use the bg-black and text-white utility classes.
You don’t need to import App.css because the styles generated by Tailwind CSS are stored in index.css which you imported earlier in index.js.
Compared to plain CSS, this approach results in less code that is easier to understand.
Styled Code with Tailwind CSS
In this article, you learned about Tailwind CSS, its strengths, disadvantages and how you can use its utility classes in React applications. In addition to classes, Tailwind CSS also provides other additional features including responsive layouts and the ability to create reusable components.