44
What is Tailwind CSS With React.js
React.js is an exceptional tool to build the frontend to your applications. You can max out React’s functionality and build the most complex application ever, but no one will want to use your application if it is not ascetically appealing. I have used straight CSS, Bootstrap, and Tailwind to make my applications pretty. They all have their own advantages and disadvantages but for the purpose of this article I want to share what Tailwind CSS is and my experience using it on my React applications.
Tailwind CSS is a utility-first CSS framework. This means that you use class names (utilities) to style your application. You many be thinking that is the same as straight CSS. With straight CSS you create your own class names and in a separate CSS file, you list your styling properties and values(unless using inline styling…more on this later). Tailwind CSS has predetermined class names that represent the CSS properties you would have in your CSS file. This allows you to use class names in your components and never have to leave the file. This helps speeds up your development especially if you work on a laptop with small screen real estate.
Why bring in this framework when you can do the same thing with inline styling? When using inline styling in react you are creating Javascript objects to handle your styling. In order to do this you must wrap your styling with double curly braces style={{}}. You also have to write your styles differently. Since these are Javascript objects that we are injecting into our JSX, we have to write our styles in camelCase. background-color: red; == {{backgroundColor: “red”}} Having to declare the whole property and its value can make your code very congested and harder to read. Tailwind uses a class name that represents that property. These class names are shorter and have set values to help with readability concerns and constancy.
One major difference is that Tailwind allows you to manage state variants and responsiveness directly in your component. Inline styles does not give you this capability. Tailwind CSS opens up the ability to adjust the component for different media sizes and even add effects like hover and focus with just using different class names. Tailwind pretty much takes inline styling and increases it readability and capability.
Now that we know what Tailwind CSS is, let's talk about the fundamentals to get you started. The initial setup for Tailwind can be a little tricky but the documentation does a great job walking you through. Check it out here. (https://tailwindcss.com/docs/guides/create-react-app)
This is your configuration file. Tailwind comes default with dedicated class names (utilities) that style in a certain way. This is great for getting started but what if you want to change some of the defaults? Instead of creating custom classes to add to your css file, you can adjust these class names and their actions in the config file. It's very easy to use and update. In the documentation for every main utility, at the bottom of the page, it will show you how to adjust the config file to add your own variants.
This is the magic sauce of Tailwind CSS. If you have never used a Utility-First framework before it can be a little bit of a learning curve, but trust me its worth your time! Learning the different class names may seem overwhelming but they are very intuitive on how they are named. Learning these names is way better than having to constantly come up with new unique class names like with CSS. Also with each utility having a set value it allows you to bring more constancy to your design. Instead of having to remember the class you created three days ago and its value, all you have to remember is that for your titles used m-8 (margin: 2 rem). Much simpler.
To use these utilities all you have to do is add the corresponding utility to the class name of your element. If I wanted to create a div that had a border-style: solid; border-width: 2px; max-width: 100% and had a box-shadow all i would have to do is:
<div className="width-full border-solid border-2 shadow">
Hi there!
</div>The documentation is outstanding. It list out everything you need to know and gives your code examples. It even gives examples of how to customize variants with your config file. Whenever I am developing I always have the documentation open in a separate tab. The documentation has a search bar that speeds up the learning curve dramatically. If you want to add padding to a div but don’t remember the class name or sizes all you have to do is type padding in the search bar and it will take you directly to that section of the documentation. I use this life line every time I develop to double check my class names and also see what values are available for each property.
Wait I thought this was a utility based framework! You are correct, but tailwind has kindly enough created some nicely designed components using their utilities to hep get you started. This is different than how React-Bootstrap handles their components. Tailwind components are just blocks of code just how you would type if you did it yourself. This allows you to edit the component and make it yours much easier. They have a list of hundreds of components that you can use. Unfortunately, to have access to them all it does cost some money. They have some free ones though to get your started though!
One major pain point of Tailwind is adding the same classes to the same type of elements over and over again. This makes developing very repetitive and also hard to maintain. Luckily, Tailwind allows you to create base styles and custom component classes. You can add base styles in your CSS files right under where you added Tailwind in the installation. You can make default styles for certain tags. I would only recommend this if you know that this tag will always need to be styled this way. It allows you to simply just use the tag instead of having to use a tag and add all the utilities over and over. Check out https://tailwindcss.com/docs/adding-base-styles for more details.
If you have something like a button or a card that is constantly styled and used in multiple places in your application, it's best to extract the component. This is very similar to creating a custom class name like you would in CSS. The documentation walks you through how to do this at https://tailwindcss.com/docs/extracting-components. This allows you to save time from having to type the same utilities over and over again and also makes your code much more maintainable. If you need to change the style of the button you can do it in one place instead of finding every button and making sure all the utilities are the same.
I don’t believe there is any perfect framework and personal preferences determine a lot of what you find practical. That is what I love about this profession. There are so many different ways to get the job done. It's up to you as a developer to determine what to use and when. So where does Tailwind CSS fall in my development?
I really enjoy using tailwind. I enjoy being able to do mostly everything in one spot. I can just add the properties I need in the flow of my coding instead of having to create my element and then create a class name and then go to a separate file and add the different properties. To me its much easier to read than straight CSS. I may just do a poor job of organizing my CSS files, but I feel like every time I use CSS my files just keep getting bigger and more overwhelming. With Tailwind all the styling is right there with the element and I can make small changes without having to worry about messing up other parts of my application. I try to use Tailwind every time I take on a project. The only time I vary is when I do not care about it looking a certain way. When I just want to develop something fast and not to concern with it looking unique, I will usually use Bootstrap. Their components are hard to beat for fast development. Other than that, Tailwind is my go to for styling my web applications. Its intuitive and very customizable!
Normally when writing articles I show some coding examples to bring the topic home but to be honest Tailwind documentation is so well layout with examples that I couldn’t do it justice. Go check out the documentation and see how code looks. https://tailwindcss.com/docs At first glance seeing so many class names that you don’t recognized can be overwhelming, but I promise a little time with it and it will become second nature to you. I hope this article gave you a good overview of what Tailwind CSS is and help answer any questions for folks who were considered trying it out.
44