()

Blog


  • BlogsCSS
  • Tailwind Css Properties Part-4 – Background, Borders, Tables

Tailwind Css Properties Part-4 – Background, Borders, Tables

By Aspire Softserv 22 Oct 2021

Tailwind-CSS-Properties-Part-4-–-BACKGROUND,-BORDERS,-TABLES.webp

Hello Leaders, Welcome to Aspire SoftServ Pvt. Ltd (Formerly Aspire Software Solutions), This is the 4th part of the Tailwind CSS series.

Introduction

In this article, we will look into spacing, sizing & typography in tailwind CSS in detail, with examples.

Let’s start with the prerequisites.

Prerequisites

If you are a beginner in Tailwind CSS, please follow our series as below:

The Complete Guide of TailwindCSS [ COMPLETE SERIES ]

What is Tailwind CSS

TailwindCSS is a utility-first CSS framework that makes it easy to implement popular design patterns. It is the framework that follows the Utility-First CSS methodology, which means your code can be more extensible, organized and reusable. 

TailwindCSS properties Part-4 – BACKGROUND, BORDERS, TABLES

BACKGROUND in Tailwind CSS

Tailwind CSS presents background related properties like as below

1. Background Attachment

Background attachment is a utility for managing how a background image acts while scrolling.

Tailwind CSS Background Attachment

Types of Background Attachment:1. Fixed: Use the bg-fixed class in tailwind CSS  to fix the background image relative to the viewport.

Code:

<div class="bg-fixed" style="background-image: url(...)"></div>

2. Local: Use the bg-local class in tailwind CSS  to scroll the background image with the container & the viewport.

<div class="bg-fixed" style="background-image: url(...)"></div>

3. Scroll: Use the bg-scroll class in tailwind CSS to scroll the background image similar to the viewport, without the container.

<div class="bg-scroll" style="background-image: url(...)"></div>

2. Background Clip

Background Clip is a utility in tailwind CSS for managing the bounding box of a UI component’s background.

Tailwind CSS Background Clip

Use:

Use the bg-clip-{keyword} utilities to restrict the bounding box of a UI component’s background.

Tailwind CSS Background Clip Use

Examples:

<div class="bg-clip-border p-6 bg-indigo-600 border-4 border-indigo-300 border-dashed"></div>
  <div class="bg-clip-padding p-6 bg-indigo-600 border-4 border-indigo-300 border-dashed"></div>
  <div class="bg-clip-content p-6 bg-indigo-600 border-4 border-indigo-300 border-dashed"></div>

3. Background Color

Utilities for managing a UI component’s background colour.

Tailwind CSS Background Color

Types of Background color:

1. Background color

The background color is a class that restrict the background color of a UI component in tailwind CSS  using the bg-{color} utilities.

Tailwind CSS Background Color Example

Code:

<button class="bg-green-500 ...">Button</button>

2. Background Opacity

Background Opacity is a utility in tailwind CSS for managing the opacity of a UI component’s background color.

Tailwind CSS Background Opacity

Code:

<div class="bg-indigo-600 bg-opacity-100 ..."></div>
  <div class="bg-indigo-600 bg-opacity-75 ..."></div>
  <div class="bg-indigo-600 bg-opacity-50 ..."></div>
  <div class="bg-indigo-600 bg-opacity-25 ..."></div>
  <div class="bg-indigo-600 bg-opacity-0 ..."></div>

Example

Tailwind CSS Background Opacity Example

3. Background Origin

Utilities for managing how a UI component’s background is positioned relative to borders, content, and padding.

Tailwind CSS Background Origin

Usage:

Use bg-origin-border, bg-origin-padding, & bg-origin-content in Tailwind CSS to control where a UI component’s background is rendered.

Code

<div class="bg-origin-border p-4 border-4 border-dashed" style="background-image: url(...)">1</div>
  <div class="bg-origin-padding p-4 border-4 border-dashed" style="background-image: url(...)">2</div>
  <div class="bg-origin-content p-4 border-4 border-dashed " style="background-image: url(...)">3</div>

Example

Tailwind CSS Background Origin Example

4. Background Position

Background Position is a utility for managing the position of a component’s background image.

Tailwind CSS Background Position

Code:

<div class="bg-no-repeat bg-left-top ..." style="background-image: url(...);"></div>
  <div class="bg-no-repeat bg-top ..." style="background-image: url(...);"></div>
  <div class="bg-no-repeat bg-right-top ..." style="background-image: url(...);"></div>
  <div class="bg-no-repeat bg-left ..." style="background-image: url(...);"></div>
  <div class="bg-no-repeat bg-center ..." style="background-image: url(...);"></div>
  <div class="bg-no-repeat bg-right ..." style="background-image: url(...);"></div>
  <div class="bg-no-repeat bg-left-bottom ..." style="background-image: url(...);"></div>
  <div class="bg-no-repeat bg-bottom ..." style="background-image: url(...);"></div>
  <div class="bg-no-repeat bg-right-bottom ..." style="background-image: url(...);"></div>

Example:

Tailwind CSS Background Position Example

5. Background Repeat

Background Repeat is a utility in Tailwind CSS for managing the repetition of a UI component’s background image.

This property is used to manage the iteration of background images. Tailwindcss offers classes as below.

Tailwind CSS Background Repeat

Code:

<div class="bg-repeat ..." style="background-image: url(...)"></div>
  <div class="bg-norepeat ..." style="background-image: url(...)">  </div>
  <div class="bg-repeat-x bg-center  ..." style="background-image: url(...)"></div>
  <div class="bg-repeat-y bg-center  ..." style="background-image: url(...)">
</div>

Example:

Tailwind CSS Background Repeat Example

6. Background Size

Utilities for managing the background size of a UI component’s background image.

TailwindCSS Background Size

Code:

<div class="bg-auto bg-no-repeat bg-center ..." style="background-image: url(...)"></div>
  <div class="bg-cover bg-no-repeat bg-center ..." style="background-image: url(...)"></div>
  <div class="bg-main bg-no-repeat bg-center ..." style="background-image: url(...)"></div>

7. Background Image

Utilities for managing a UI component’s background image.

TailwindCSS Background Image

Code:

<div class="bg-gradient-to-r from-yellow-400 via-red-500 to-pink-500 ...">
</div>

Example:

TailwindCSS Background Image Example

8. Gradient Color Stops 

Gradient Color Stops is a utility for managing the color stops in background gradients in Tailwind CSS.

Examples of Gradient Color Stops:

1. Starting color

Set the starting color class of a gradient in tailwind CSS using the from-{color} class utilities.

<div class="bg-gradient-to-r from-red-500 ..."></div>

2. Ending color

Set the ending color class of a gradient in tailwind CSS using the to-{color} class utilities.

<div class="bg-gradient-to-r from-green-400 to-blue-500 ..."></div>

‘Gradients to’ don’t fade in from transparent by default. To fade in from transparent, first, reverse the gradient direction & use a from-{color} utility.

3. Middle color

The middle color is a class that enhances a middle color to a gradient in tailwind CSS using the via-{color} utilities.

<div class="bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 ..."></div>

Gradients with a from-{color} & via-{color} in tailwind CSS will fade out to transparent by default if no to-{color} is present.

Examples of Starting, Middle & Ending color gradients:

<div class="container mx-auto px-4">
     <h2 class="text-gray-800 font-extrabold"> STARTING COLOR - USING from-{color}</h2>
     <div class="w-full h-20 bg-gradient-to-r from-red-500"></div>
     <br />
     <h2 class="text-gray-800 font-extrabold"> ENDING COLOR - USING to-{color}</h2>
     <div class="w-full h-20 bg-gradient-to-r from-green-400 to-blue-500"></div>
     <br />
     <h2 class="text-gray-800 font-extrabold"> MIDDLE COLOR - USING via-{color}</h2>
     <div class="w-full h-20 bg-gradient-to-r from-purple-400 via-pink-500 to-red-500"></div>
     <br />
  </div>

Tailwind CSS Middle & Ending color gradients

4. Fading to transparent

Fading to transparent Gradients is fade out to transparent by default in tailwind CSS, without requiring you to add to-transparent explicitly.

BORDERS in Tailwind CSS

Border Radius

Border radius is a utility in tailwind CSS for managing the border-radius of a UI component.

TailwindCSS Border Radius

Code:

<div class="container mx-auto px-4 flex flex-row space-x-4">
     <div class="rounded-sm p-6 bg-blue-500 py-6 w-36 text-white border-black border-2">.rounded-sm</div>
     <div class="rounded p-6 bg-blue-500 py-6 w-36 text-white border-black border-2">.rounded</div>
     <div class="rounded-md p-6 bg-blue-500 py-6 w-36 text-white border-black border-2">.rounded-md</div>
     <div class="rounded-lg p-6 bg-blue-500 py-6 w-36 text-white border-black border-2">.rounded-lg</div>
     <br/>
     <div class="rounded-none p-6 bg-blue-500 py-6 w-36 text-white border-black border-2">.rounded-none</div>
     <div class="rounded-full py-3 px-6 bg-blue-500 text-white flex justify-center border-black border-2">Circle</div>
     <br/>
     <div class="rounded-t-lg p-6 bg-blue-500 py-6 w-36 text-white border-black border-2">.rounded-t-lg</div>
     <div class="rounded-r-lg p-6 bg-blue-500 py-6 w-36 text-white border-black border-2">.rounded-r-lg</div>
     <div class="rounded-b-lg p-6 bg-blue-500 py-6 w-36 text-white border-black border-2">.rounded-b-lg</div>
     <div class="rounded-l-lg p-6 bg-blue-500 py-6 w-36 text-white border-black border-2">.rounded-l-lg</div>
  </div>

Example:

TailwindCSS Border Radius Example

Border Width

Utilities for managing the width of a UI component’s borders.

Tailwind CSS Border Width

Code:

<div class="border-0 border-indigo-600 ..."></div>
  <div class="border border-indigo-600 ..."></div>
  <div class="border-2 border-indigo-600 ..."></div>
  <div class="border-4 border-indigo-600 ..."></div>
  <div class="border-8 border-indigo-600 ..."></div>

Example:

Tailwind CSS Border Width Example

Border Color

Utilities for managing the color of a UI component’s borders.

TailwindCSS Border Color

Code:

<input class="border-2 border-blue-500 ...">

Example:

TailwindCSS Border Color Example

Read more about border-color in tailwind CSS documentation. 

Border Opacity

Utilities for managing the opacity of a UI component’s border color.

TailwindCSS Border Opacity

Code:

<div class="border-4 border-light-blue-500 border-opacity-100 ..."></div>
  <div class="border-4 border-light-blue-500 border-opacity-75 ..."></div>
  <div class="border-4 border-light-blue-500 border-opacity-50 ..."></div>
  <div class="border-4 border-light-blue-500 border-opacity-25 ..."></div>
  <div class="border-4 border-light-blue-500 border-opacity-0 ..."></div>

Example:

TailwindCSS Border Opacity Example

Border Style

Border Style is a utility in tailwind CSS for managing the style of a UI component’s borders.

tailwindcss-border-divide-style

Code:

<div class="border-solid border-4 border-light-blue-500 ..."></div>
  <div class="border-dashed border-4 border-light-blue-500 ..."></div>
  <div class="border-dotted border-4 border-light-blue-500 ..."></div>
  <div class="border-double border-4 border-light-blue-500 ..."></div>
  <div class="border-none border-4 border-light-blue-500 ..."></div>

Example:

tailwindcss-border-divide-style-example

Divide Width

Utilities for managing the border width between UI components.

TailwindCSS Divide Width

Code:

<p> divide-x </p>
  <div class="grid grid-cols-3 divide-x divide-green-500">
     <div>1</div>
     <div>2</div>
     <div>3</div>
  </div>
  <p> divide-y </p>
  <div class="grid grid-cols-1 divide-y divide-yellow-500">
     <div>1</div>
     <div>2</div>
     <div>3</div>
  </div>
  <p> divide-y-reverse </p>
  <div class="flex flex-col-reverse divide-y divide-y-reverse divide-rose-400">
     <div>1</div>
     <div>2</div>
     <div>3</div>
  </div>

Example:

TailwindCSS Divide Width  Example

N.B: Read more about Divide Color, Divide Opacity and Divide Style in the documentation.

Ring

Ring Width

Utilities for creating outline rings with box shadows.

Tailwind CSS Ring Width

Code:

<button class="... ring-0">ring-0</button>
  <button class="... ring-2">ring-2</button>
  <button class="... ring">ring</button>
  <button class="... ring-4">ring-4</button>

Example:

TailwindCSS Ring Width Example

Ring Color 

Ring Color is a utility in tailwind CSS for setting the color of outline rings.

.[ring]-transparent

.[ring|-current

.[ring]-white

.[ring]-black

.[ring]-{$color}-{50-900}

Code:

<button class="... ring-4 ring-indigo-300">
    Button
  </button>

Example:

Tailwind CSS Ring color Example

Ring Opacity

Ring Opacity is a utility in tailwind CSS for setting the opacity of outline rings.

[RING ]-OPACITY

.[ ring ]-opacity-[ $opacity ]

Code:

<button class="... ring-4 ring-red-500 ring-opacity-50">
    Button
  </button>

Example:

TailwindCSS Ring Opacity Example

Ring Offset Width

Ring Offset Width is a utility in tailwind CSS for simulating an offset while adding outline rings.

TailwindCSS Ring Offset Width

Code:

<button class="... ring ring-pink-600 ring-offset-0">ring-0</button>
  <button class="... ring ring-pink-600 ring-offset-2">ring-2</button>
  <button class="... ring ring-pink-600 ring-offset-4">ring-4</button>

Example:

TailwindCSS Ring Offset Width Example

Ring Offset Color

Ring Offset Color is a utility in tailwind CSS for setting the color of the outline ring offsets.

Code:

<p class="font-semibold text-blue-600"> bg-purple-100</p>
  <div class="... bg-blue-100">
     <button class="... ring ring-blue-600 ring-offset-4 ring-offset-blue-100">
     ring-offset-blue-100
     </button>
  </div>

Example:

Tailwind CSS Ring Offset Color Example

TABLES

Border Collapse

Border Collapse is a utility in tailwind CSS for managing if table borders should collapse or be separated

TailwindCSS Border Collapse

Border-collapse:

border-collapse is used to join adjacent cell borders into one single border while possible. Note that this contains collapsing borders on the top-level <table> tag.

Code:

<table class="border-collapse border border-green-800 ...">
  ----
  </table>

Example:

TailwindCSS Border Collapse Example

Border-separate:

border-separate is used to force each cell to display its separate borders.

Code:

<table class="border-separate border border-green-800 ...">
  ----
  </table>

Example:

tailwindcss Border-separate Example

Table Layout

Table Layout is a utility by Tailwind CSS for managing the table layout algorithm.

tailwindcss Table Layout

1. table-auto:

Table-auto is used in tailwind CSS to enable the table to automatically size columns to fit the contents of the cell.

Code:

<div class="container mx-auto p-8">
     <table class="table-fixed border-2 border-blue-500">
        <thead>
           <tr>
              <th class="border-2 border-blue-500">No</th>
              <th class="border-2 border-blue-500">BookName</th>
              <th class="border-2 border-blue-500">Edition</th>
           </tr>
        </thead>
        <tbody>
           <tr>
              <td class="border-2 border-blue-500">1</td>
              <td class="w-1/4 border-2 border-blue-500">JavaScript -The Complete Reference Book - O'Reilly The Complete Reference
                 Book - O'Reilly The Complete Reference Book - O'Reilly
              </td>
              <td class="border-2 border-blue-500">7th</td>
           </tr>
           <tr>
              <td class="border-2 border-blue-500">2</td>
              <td class="w-1/4 border-2 border-blue-500">Java</td>
              <td class="border-2 border-blue-500">11th</td>
           </tr>
           <tr>
              <td class="border-2 border-blue-500">3</td>
              <td class="w-1/4 border-2 border-blue-500">Liferay</td>
              <td class="border-2 border-blue-500">10th</td>
           </tr>
        </tbody>
     </table>
  </div>

Example:

tailwindcss-table-auto

2. table-fixed:

Table-fixed is used as table-fixed to allow the table to ignore the content & use fixed widths for columns. 

Note: You can manually set the widths for some columns & the rest of the available width will be divided evenly amongst the columns without specific width.

Code:

<table class="table-fixed">
     ------
  </table>

Example:

tailwindcss-TABLE-FIXED

Conclusion

We've covered all the fantastic features of Tailwind CSS, from backgrounds to borders and tables. For a comprehensive understanding, we recommend exploring the complete Tailwind CSS series in order.

Save this post for quick access and use it as a handy reference guide. Follow the official documentation for any configuration-related tweaks during your projects.

The most effective way to learn is through hands-on experience. Dive into each section, practice, and bookmark for easy reference. And, of course, share this valuable resource with your colleagues and friends on social media like Facebook and LinkedIn.


Ready to elevate your web development game? Contact us and let's discuss how we can assist you in implementing Tailwind CSS in your projects!


Tags

CSS

Share Blog

+

YEARS EXPERIENCE

+

CLIENT TELE ACROSS THE GLOBE

+

OVERALL PROJECTS

+

YEARS OF PARTNERSHIP LENGTH

+

Countries served

REACH OUT

Ready to Build Something Great ?

Experience. Expertise. Know-How
80+

Tech Experts

13+

Years Of Developing

90%

Referral Business

Trust. Reputation. Standards
mail-image
mail-image
mail-image