Tailwind CSS - Border Spacing

Previous
Quiz
Next

Tailwind CSS Border Spacing is a utility class that used to controll spacing between borders.

Tailwind CSS Border Spacing Classes

The following is the list of Tailwind CSS Border Spacing Classes that provides an effective way of handling table border spacing.

Class CSS Properties
border-spacing-0 border-spacing: 0px 0px;
border-spacing-x-0 border-spacing: 0px var(--tw-border-spacing-y);
border-spacing-y-0 border-spacing: var(--tw-border-spacing-x) 0px;
border-spacing-px border-spacing: 1px 1px;
border-spacing-x-px border-spacing: 1px var(--tw-border-spacing-y);
border-spacing-y-px border-spacing: var(--tw-border-spacing-x) 1px;
border-spacing-0.5 border-spacing: 0.125rem 0.125rem;
border-spacing-x-0.5 border-spacing: 0.125rem var(--tw-border-spacing-y);
border-spacing-y-0.5 border-spacing: var(--tw-border-spacing-x) 0.125rem;
border-spacing-1 border-spacing: 0.25rem 0.25rem;
border-spacing-x-1 border-spacing: 0.25rem var(--tw-border-spacing-y);
border-spacing-y-1 border-spacing: var(--tw-border-spacing-x) 0.25rem;
border-spacing-1.5 border-spacing: 0.375rem 0.375rem;
border-spacing-x-1.5 border-spacing: 0.375rem var(--tw-border-spacing-y);
border-spacing-y-1.5 border-spacing: var(--tw-border-spacing-x) 0.375rem;
border-spacing-2 border-spacing: 0.5rem 0.5rem;
border-spacing-x-2 border-spacing: 0.5rem var(--tw-border-spacing-y);
border-spacing-y-2 border-spacing: var(--tw-border-spacing-x) 0.5rem;
border-spacing-2.5 border-spacing: 0.625rem 0.625rem;
border-spacing-x-2.5 border-spacing: 0.625rem var(--tw-border-spacing-y);
border-spacing-y-2.5 border-spacing: var(--tw-border-spacing-x) 0.625rem;
border-spacing-3 border-spacing: 0.75rem 0.75rem;
border-spacing-x-3 border-spacing: 0.75rem var(--tw-border-spacing-y);
border-spacing-y-3 border-spacing: var(--tw-border-spacing-x) 0.75rem;
border-spacing-3.5 border-spacing: 0.875rem 0.875rem;
border-spacing-x-3.5 border-spacing: 0.875rem var(--tw-border-spacing-y);
border-spacing-y-3.5 border-spacing: var(--tw-border-spacing-x) 0.875rem;
border-spacing-4 border-spacing: 1rem 1rem;
border-spacing-x-4 border-spacing: 1rem var(--tw-border-spacing-y);
border-spacing-y-4 border-spacing: var(--tw-border-spacing-x) 1rem;
border-spacing-5 border-spacing: 1.25rem 1.25rem;
border-spacing-x-5 border-spacing: 1.25rem var(--tw-border-spacing-y);
border-spacing-y-5 border-spacing: var(--tw-border-spacing-x) 1.25rem;
border-spacing-6 border-spacing: 1.5rem 1.5rem;
border-spacing-x-6 border-spacing: 1.5rem var(--tw-border-spacing-y);
border-spacing-y-6 border-spacing: var(--tw-border-spacing-x) 1.5rem;
border-spacing-7 border-spacing: 1.75rem 1.75rem;
border-spacing-x-7 border-spacing: 1.75rem var(--tw-border-spacing-y);
border-spacing-y-7 border-spacing: var(--tw-border-spacing-x) 1.75rem;
border-spacing-8 border-spacing: 2rem 2rem;
border-spacing-x-8 border-spacing: 2rem var(--tw-border-spacing-y);
border-spacing-y-8 border-spacing: var(--tw-border-spacing-x) 2rem;
border-spacing-9 border-spacing: 2.25rem 2.25rem;
border-spacing-x-9 border-spacing: 2.25rem var(--tw-border-spacing-y);
border-spacing-y-9 border-spacing: var(--tw-border-spacing-x) 2.25rem;
border-spacing-10 border-spacing: 2.5rem 2.5rem;
border-spacing-x-10 border-spacing: 2.5rem var(--tw-border-spacing-y);
border-spacing-y-10 border-spacing: var(--tw-border-spacing-x) 2.5rem;
border-spacing-11 border-spacing: 2.75rem 2.75rem;
border-spacing-x-11 border-spacing: 2.75rem var(--tw-border-spacing-y);
border-spacing-y-11 border-spacing: var(--tw-border-spacing-x) 2.75rem;
border-spacing-12 border-spacing: 3rem 3rem;
border-spacing-x-12 border-spacing: 3rem var(--tw-border-spacing-y);
border-spacing-y-12 border-spacing: var(--tw-border-spacing-x) 3rem;
border-spacing-14 border-spacing: 3.5rem 3.5rem;
border-spacing-x-14 border-spacing: 3.5rem var(--tw-border-spacing-y);
border-spacing-y-14 border-spacing: var(--tw-border-spacing-x) 3.5rem;
border-spacing-16 border-spacing: 4rem 4rem;
border-spacing-x-16 border-spacing: 4rem var(--tw-border-spacing-y);
border-spacing-y-16 border-spacing: var(--tw-border-spacing-x) 4rem;
border-spacing-20 border-spacing: 5rem 5rem;
border-spacing-x-20 border-spacing: 5rem var(--tw-border-spacing-y);
border-spacing-y-20 border-spacing: var(--tw-border-spacing-x) 5rem;
border-spacing-24 border-spacing: 6rem 6rem;
border-spacing-x-24 border-spacing: 6rem var(--tw-border-spacing-y);
border-spacing-y-24 border-spacing: var(--tw-border-spacing-x) 6rem;
border-spacing-28 border-spacing: 7rem 7rem;
border-spacing-x-28 border-spacing: 7rem var(--tw-border-spacing-y);
border-spacing-y-28 border-spacing: var(--tw-border-spacing-x) 7rem;
border-spacing-32 border-spacing: 8rem 8rem;
border-spacing-x-32 border-spacing: 8rem var(--tw-border-spacing-y);
border-spacing-y-32 border-spacing: var(--tw-border-spacing-x) 8rem;
border-spacing-36 border-spacing: 9rem 9rem;
border-spacing-x-36 border-spacing: 9rem var(--tw-border-spacing-y);
border-spacing-y-36 border-spacing: var(--tw-border-spacing-x) 9rem;
border-spacing-40 border-spacing: 10rem 10rem;
border-spacing-x-40 border-spacing: 10rem var(--tw-border-spacing-y);
border-spacing-y-40 border-spacing: var(--tw-border-spacing-x) 10rem;
border-spacing-44 border-spacing: 11rem 11rem;
border-spacing-x-44 border-spacing: 11rem var(--tw-border-spacing-y);
border-spacing-y-44 border-spacing: var(--tw-border-spacing-x) 11rem;
border-spacing-48 border-spacing: 12rem 12rem;
border-spacing-x-48 border-spacing: 12rem var(--tw-border-spacing-y);
border-spacing-y-48 border-spacing: var(--tw-border-spacing-x) 12rem;
border-spacing-52 border-spacing: 13rem 13rem;
border-spacing-x-52 border-spacing: 13rem var(--tw-border-spacing-y);
border-spacing-y-52 border-spacing: var(--tw-border-spacing-x) 13rem;
border-spacing-56 border-spacing: 14rem 14rem;
border-spacing-x-56 border-spacing: 14rem var(--tw-border-spacing-y);
border-spacing-y-56 border-spacing: var(--tw-border-spacing-x) 14rem;
border-spacing-60 border-spacing: 15rem 15rem;
border-spacing-x-60 border-spacing: 15rem var(--tw-border-spacing-y);
border-spacing-y-60 border-spacing: var(--tw-border-spacing-x) 15rem;
border-spacing-64 border-spacing: 16rem 16rem;
border-spacing-x-64 border-spacing: 16rem var(--tw-border-spacing-y);
border-spacing-y-64 border-spacing: var(--tw-border-spacing-x) 16rem;
border-spacing-72 border-spacing: 18rem 18rem;
border-spacing-x-72 border-spacing: 18rem var(--tw-border-spacing-y);
border-spacing-y-72 border-spacing: var(--tw-border-spacing-x) 18rem;
border-spacing-80 border-spacing: 20rem 20rem;
border-spacing-x-80 border-spacing: 20rem var(--tw-border-spacing-y);
border-spacing-y-80 border-spacing: var(--tw-border-spacing-x) 20rem;
border-spacing-96 border-spacing: 24rem 24rem;
border-spacing-x-96 border-spacing: 24rem var(--tw-border-spacing-y);
border-spacing-y-96 border-spacing: var(--tw-border-spacing-x) 24rem;

Functionality of Tailwind CSS Border Collapse Classes

  • border-spacing-* This is used to set the border space in the both axis in a single command.
  • border-spacing-x-* This is used to set the border spacing on X-axis.
  • border-spacing-y-* This is used to set the border spacing on Y-axis.
  • border-spacing-px This class set the border spaing 1px on both axis.
  • border-spacing-x-px This class set the border spaing 1px on X-axis.
  • border-spacing-y-px This class set the border spaing 1px on Y-axis.

Note: The * can be replaceble with any number mentioned above in the table.

Tailwind CSS Border Spacing Class Examples

The following examples will illustrate the Tailwind CSS Border Spacing class utility.

Setting Table Border Space

We can use the border-spacing-*, utilities to set the space between the borders of table cells if is set as separate borders.

Example

<!DOCTYPE html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-3xl mb-3">
        Tailwind CSS Border Spacing
    </h1>
    <table class="border-separate border-spacing w-full
                  border border-slate-500">
        <thead>
            <tr>
                <th class="bg-green-600 border 
                           border-slate-600 w-1/3">
                    Acronym
                </th>
                <th class="bg-green-600 border 
                           border-slate-600 w-2/3">
                    Stand For
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="bg-green-300 border 
                           border-slate-700">
                    HTML
                </td>
                <td class="bg-green-300 border 
                           border-slate-700">
                    HyperText markup Language
                </td>
            </tr>
            <tr>
                <td class="bg-green-300 border 
                           border-slate-700">
                    CSS
                </td>
                <td class="bg-green-300 border 
                           border-slate-700">
                    Cascading Style Sheets
                </td>
            </tr>
        </tbody>
    </table>
</body>

</html>

Setting Table Border Space Axis Wise

We can use the border-spacing-x-*, and border-spacing-y-* utilities to set the space between the borders of table cells if is set as separate borders.

Example

<!DOCTYPE html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-3xl mb-3">
        Tailwind CSS Border Spacing
    </h1>
    <table class="border-separate border-spacing-x-2
                  border-spacing-y-4 w-full
                  border border-slate-500">
        <thead>
            <tr>
                <th class="bg-green-600 border 
                           border-slate-600 w-1/3">
                    Acronym
                </th>
                <th class="bg-green-600 border 
                           border-slate-600 w-2/3">
                    Stand For
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="bg-green-300 border 
                           border-slate-700">
                    HTML
                </td>
                <td class="bg-green-300 border 
                           border-slate-700">
                    HyperText markup Language
                </td>
            </tr>
            <tr>
                <td class="bg-green-300 border 
                           border-slate-700">
                    CSS
                </td>
                <td class="bg-green-300 border 
                           border-slate-700">
                    Cascading Style Sheets
                </td>
            </tr>
        </tbody>
    </table>
</body>

</html>
Print Page
Previous
Next