I recently started using Tailinwind CSS and often found my <div> element with long strings of the same property throughout my project. React.js is built on components to practice “Don’t Repeat Yourself”(DRY) code so, why not implement same principal to our styling?
This article is in reference to a Udemy course
Modern React with Redux [2023 Update]
If you would like to follow along the Udemy course, in Section 12: Practicing Props and State Design, we are building out a drop down animation which gives the user three options to select from. This is great to understand state and react hooks. Let’s focus on the Tailwind CSS.
First, we need to install the Tailwind CSS package with using Tailwind CSS docs or https://www.npmjs.com/package/tailwindcss. We can run the following line in our Terminal:
npm i tailwindcss
The weekly downloads surpasses 5 million!!
Using react.js, the use of className in our return statement stays the same. We do not have a dedicated .css file for our component. We can access the search panel on https://tailwindcss.com/docs/background-color, to get started with a background color of white: bg-white
Code snippet below, you can notice my cursor highlighted duplicate CSS properties in seperate <div> tags:
