A few weeks ago, I started a series where I planned to cover Tailwind to the best of my ability. Over the years, I have used Bootstrap and Bulma a heck of a lot but I wanted to branch out a little. Today’s post is going to cover borders, shapes, and backgrounds. Let’s get started.
Like I said last time, Tailwind is known for doing everything through classes. Let’s start by looking at what classes are used for adding a border to an element. The classes for a basic border are “border-[t,r,b,or l]-[0, 2, 4, or 8]” where t stands for top, r stands for right, b stands for bottom, and l stands for left. The number indicated the size of the border. The result looks like this:
You can also combine them like so …
… but if you drop the TRBL, you can simplify things like so …
If you want something beyond just a solid border, you can also apply a border style. These are the available classes for that:
You can also apply a border color. Similar to the “text-[color]-[a number]” class that we covered last time, you can use “border-[color]-[a number]” to apply a color to a border. Here are a few examples:
Some of the colors in the spec don’t render how you would expect in every client and much like last time, the higher the number doesn’t mean the stronger the color. For example, this is what the spectrum looks like with the color red:
… and this is what the spectrum looks like with the color indigo:
Now that we have covered border widths, colors, and styles, the only thing left is border radius. We covered how to do that with regular css, back in november. With Tailwind, you can apply a border radius with the class “rounded-[amount]”, “rounded-[t,r,b, or l]-[amount]”, or “rounded-[tl,tr,br,or bl]-[amount]”. A few examples of this are:
With a border radius, you can go from a box to a circle and everything in between.
So, far, I have used regular css to give the right spacing to the example divs but Tailwind can handle heights and widths, too. The class for a width is “w-[amount]” and for fixed widths, it looks like this:
… but you can also set minimum widths like this …
… and maximum widths like this …
Heights are set the same way but with an “h” instead of a “w”.
If we combine these concepts and add “border-2 w-60 h-60 rounded-full” to a div, we can get a 240px by 240px ball.
Much like the other color-related classes, there is a “bg-[color]-[intensity]” class for backgrounds. This means that we can create a red ball like so:
… and you can even set a gradient as a background, like so:
Stay tuned for the next tailwind post in something like a month? Until then, feel free to drop a comment below if you have any questions.