Tailwind CSS Styling Background and Borders

Let’s explore some basic utility classes provided by Tailwind CSS for styling text elements.

Background Color

You can set the background color of an element using utility classes like bg-red-500, bg-blue-700, etc., where the number represents the shade of the color.

<div class="bg-red-500 p-4">
    <p>Red Background</p>
</div>
<div class="bg-blue-700 p-4">
    <p>Blue Background</p>
</div>

Background Opacity

You can also adjust the opacity of the background color using utility classes like bg-opacity-25, bg-opacity-50, etc.

<div class="bg-red-500 bg-opacity-25 p-4">
    <p>Red Background with 25% Opacity</p>
</div>
<div class="bg-blue-700 bg-opacity-50 p-4">
    <p>Blue Background with 50% Opacity</p>
</div>

Border

Tailwind CSS provides utility classes for adding borders to elements. You can use classes like border, border-solid, border-dashed, border-dotted, etc.

<div class="border border-black p-4">
    <p>Border</p>
</div>
<div class="border border-red-500 border-solid p-4">
    <p>Red Border</p>
</div>

Rounded Corners

You can apply rounded corners to elements using classes like rounded-sm, rounded-md, rounded-lg, etc.

<div class="bg-gray-300 rounded-lg p-4">
    <p>Rounded Corners</p>
</div>

Box Shadow

You can add box shadows to elements using utility classes like shadow-sm, shadow-md, shadow-lg, etc.

<div class="bg-gray-300 rounded-lg shadow-md p-4">
    <p>Box Shadow</p>
</div>

These are some of the basic utility classes for styling backgrounds, borders, and shadows in Tailwind CSS. Experiment with these classes to achieve the desired visual effects for your elements.