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:
See the Pen
Tailwind 2: Borders, Shapes and Backgrounds — Borders by Joe Steinbring (@steinbring)
on CodePen.
You can also combine them like so …
See the Pen
Tailwind 2: Borders, Shapes and Backgrounds — Borders 2 by Joe Steinbring (@steinbring)
on CodePen.
… but if you drop the TRBL, you can simplify things like so …
See the Pen
Tailwind 2: Borders, Shapes and Backgrounds — Borders 3 by Joe Steinbring (@steinbring)
on CodePen.
If you want something beyond just a solid border, you can also apply a border style. These are the available classes for that:
See the Pen
Tailwind 2: Borders, Shapes and Backgrounds — Border Styles by Joe Steinbring (@steinbring)
on CodePen.
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:
See the Pen
Tailwind 2: Borders, Shapes and Backgrounds — Border Color 1 by Joe Steinbring (@steinbring)
on CodePen.
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:
See the Pen
Tailwind 2: Borders, Shapes and Backgrounds — Border Color 2 by Joe Steinbring (@steinbring)
on CodePen.
… and this is what the spectrum looks like with the color indigo:
See the Pen
Tailwind 2: Borders, Shapes and Backgrounds — Border Color 3 by Joe Steinbring (@steinbring)
on CodePen.
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:
See the Pen
Tailwind 2: Borders, Shapes and Backgrounds — Border Radius by Joe Steinbring (@steinbring)
on CodePen.
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:
See the Pen
Tailwind 2: Borders, Shapes and Backgrounds — Width 1 by Joe Steinbring (@steinbring)
on CodePen.
… but you can also set minimum widths like this …
See the Pen
Tailwind 2: Borders, Shapes and Backgrounds — Min-Width by Joe Steinbring (@steinbring)
on CodePen.
… and maximum widths like this …
See the Pen
Tailwind 2: Borders, Shapes and Backgrounds — Max-Width by Joe Steinbring (@steinbring)
on CodePen.
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.
See the Pen
Tailwind 2: Borders, Shapes and Backgrounds — 240px x 240px Ball by Joe Steinbring (@steinbring)
on CodePen.
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:
See the Pen
Tailwind 2: Borders, Shapes and Backgrounds — 240px x 240px Red Ball by Joe Steinbring (@steinbring)
on CodePen.
… and you can even set a gradient as a background, like so:
See the Pen
Tailwind 2: Borders, Shapes and Backgrounds — 240px x 240px Gradient Ball by Joe Steinbring (@steinbring)
on CodePen.
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.