7 Tailwind CSS Tips I Wish I Knew Earlier

For anyone who sees Tailwind for the first time, it can look like ancient Greek when compared to other Frameworks BUT Tailwind's ability to allow for customization makes it an extremely powerful CSS UI kit. While I was learning to use Tailwind, I faced a steep learning curve and it took me awhile to learn a lot of the small details that make Tailwind so great. That being said, I want to share my 7 Tailwind CSS tips that I wish I knew when I first started learning about it.

1. Tailwind Acronyms and Their Meanings
What makes Tailwind so confusing is their use of various acronyms and what exactly they mean. Here is a quick list of various acronyms used by Tailwind to help you navigate:

• "bg" = background (this is used to establish that the image, pattern, or color will serve as the background for whatever you are applying it to)
• "gr" = gradient (used to change the intensity of color from one side to another)
• "m" = margin (this is used to add space around an object/text/image/etc. in relation to the overall size of the window. Margins can have many sub variants like "my" (top and bottom margin), "mx" (left and right margin), "mt" (margin on top), "ml" (margin left), "mr" (margin right), "mb" (margin bottom)) - Note: when margin is used like this "m-4" the number at the end is the amount of pixels for the margin size. Also, since margins are used for relational spacing in the window, you can also use things like "mx-auto" to center an object in the window.
• "p" = padding (unlike margin, padding is used for the space between objects on the window rather than their relation to spacing in the window. Just like margin, padding also uses the same sub variants like "py", "px", etc.)
• "w" = width (used to size the width of an object). Note: Tailwind uses both pixels (up to 96) and fractions for sizes (ex: w-4/9). The use of fractions is much easier for changing screen sizes but note that there are only certain fractions that are accepted by Tailwind and you should consult their site.
• "h" = height (used to size the height of an object). Note: same rules apply to height as they do width.
• "col" = column (used for spacing objects into parallel vertical lines)
• "tr" = top right
• "br" = bottom right
• "tl" = top left
• "tr" = top right

2. How Does Applying Colors to Objects Work?
When applying a color, Tailwind will want you to specify 3 things:

1. where is it being applied to
2. what color do you want (you will have to see what types of colors are available on Tailwind's website)
3. what opacity/shade do you want applied to the color

An example of this will look like:
<div className="bg-blue-400 text-slate-600">Hello<div>

In the example above, I am telling Tailwind that I want the background to have a blue color with an opacity of 400 and the text to have a color of slate gray with an shade of 600. The higher shade number, the darker the color and the lower the number, the lighter the shade is.

3. There Is a Difference Between Tailwind and Tailwind React
This may seem strange but there truly is a difference using regular Tailwind and Tailwind React. One example of this comes from using "className" instead of "class" to specify features. Be careful to know what type and version of Tailwind you are using.

4. Other Frameworks Like Flowbite Can Simplify Using Tailwind
For those who may have used UI kits, like Semantic UI, that provide premade features to add to your React components - you will definitely want to add Flowbite to your imports. Flowbite has premade features that you can find the code and add it to your JSX. To install Flowbite, go to this link: install and to see the different components offered, go to this link: components. Note: you will also need to import Flowbite at the top of your component with the specification of the component you are using. For example:
import { Card, Carousel } from 'flowbite-react'

5. Centering Things in Tailwind Can Be Hard, Try These
I found centering objects with Tailwind to be a particularly tough objective. There are a few ways I found that will help you to center objects/text. For text, try this (sometimes the centering techniques for objects/images also work on text):
className="text-center"
For objects/images, try this:
className="flex items-center justify-center"
className="container mx-auto"
className="ml-auto mr-auto"

6. Using Grids, Columns, and Rows
Grids, columns, and rows are a great way to organize images/cards/objects on a React app. I usually use this command to help me achieve this:
className="grid grid-cols-3 gap-1 justify-center"
Let's explain what this code is doing, first we specify that we want to use a "grid". Then we tell Tailwind that we want to have 3 columns with "grid-cols-3". We use the "gap-1" to specify how much spacing we want between the objects in the grid. Finally, this last one is optional but it helps to center the objects "justify-center".

7. Font vs. Text What's the Difference?
This one can be confusing, text and font seem like they are the same thing, right? Well, let's see how they differ. In Tailwind, the font allows you to determine the type of font to use, the size of the font, it's smoothing, the weight, and the style (italic or not). The text, on the other hand, allows you to give the letters colors, decorate (underline, line through, etc.), overflow, indent, and alignment. The text gives the user the ability to also make changes on how the text flows around objects or images.

Conclusion
Tailwind truly is a remarkable UI kit and I hope that these tips will help to get you started on making some amazing apps.