Make writing a habit together! This is the third day of my participation in the “Gold Digging Day New Plan · April More text Challenge”. Click here for more details

Tailwind CSS V3.0, released on December 9, 2021, brings significant performance improvements, improved workflows, and a host of new features. This release is one of the most exciting releases of Tailwind CSS ever. This article introduces the ten most important features introduced in Tailwind CSS V3. To use them and improve the experience in front-end development.

1.Play CDN

Play CDN makes it possible to introduce Tailwind CSS in a project without downloading the full package through NPM or Yarn. This is not a CSS-BASED CDN, but a Script-based CDN. Add it to the header of the HTML file, and you can use Tailwind’s class to style the content elements.

The Play CDN is not intended to be used in a production environment, but is a quick start with zero configuration.

Refer to the following code snippet to understand how to introduce Tailwind using the Play CDN.

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Tailwind CSS v3.0</title>
    <! -- Import Tailwind CSS Through Play CDN -->
    <script src="https://cdn.tailwindcss.com/"></script>
</head>
<body>
    <! -- Your Tailwind components here -->
    <h1 class="text-3xl font-bold underline">
        Hello world!
    </h1>
</body>
</html>
Copy the code

2. Rich underline styles

Rich underline styles are used to change the underline color, style, thickness, and offset. Let’s try it briefly.

  • Underline color
  • Underline style
  • Underline thickness
  • Underscore offset

A) Underline color

This function controls the color of the underline. You can change the color of the underline element using indentation -{color}. Refer to the following code snippet to see how to use it.

<div>
    <p>
        I’m Tara Parasd Routray, a full-stack developer based in India. 
        I love to build amazing websites keeping 
        <! -- Utilties used: underline, decoration-sky-500 -->
        <a class="underline decoration-sky-500">performance and security</a> in mind. 
        <! -- Utilties used: underline, decoration-pink-500 -->
        Outside of work, I love to <a class="underline decoration-pink-500">watch Nextflix
        <! -- Utilties used: underline, decoration-indigo-500 --> 
        </a> and play <a class="underline decoration-indigo-500">outdoor games</a> with my friends.
    </p>
</div>
Copy the code

Below is the effect of the above code.

You can also control the opacity of the underline color using the Color Opacity modifier. See the following code snippet to see how to use it.

<div>
    <p>
        I’m Tara Parasd Routray, a full-stack developer based in India. 
        I love to build amazing websites keeping 
        <! -- Utilties used: underline, decoration-sky-500/30 -->
        <a class="underline decoration-sky-500/30">performance and security</a> in mind. 
        <! -- Utilties used: underline, decoration-pink-500/30 -->
        Outside of work, I love to <a class="underline decoration-pink-500/30">watch Nextflix
        <! -- Utilties used: underline, decoration-indigo-500/30 --> 
        </a> and play <a class="underline decoration-indigo-500/30">outdoor games</a> with my friends.
    </p>
</div>
Copy the code

Below is the effect of the above code.

B) Underline style

This function controls the style of the underline. You can change the style of the underline using intro -{style}. See the following code snippet to see how to use them.

<div>
    <! -- Utitlies used: underline, decoration-solid -->
    <p class="underline decoration-solid">The quick brown fox...</p>
    <! -- Utitlies used: underline, decoration-double -->
    <p class="underline decoration-double">The quick brown fox...</p>
    <! -- Utitlies used: underline, decoration-dotted -->
    <p class="underline decoration-dotted">The quick brown fox...</p>
    <! -- Utitlies used: underline, decoration-dashed -->
    <p class="underline decoration-dashed">The quick brown fox...</p>
    <! -- Utitlies used: underline, decoration-wavy -->
    <p class="underline decoration-wavy">The quick brown fox...</p>
</div>
Copy the code

Below is the effect of the above code.

C) Thickness of the underline

This function is used to control the thickness of the underline. You can change the thickness of the underscore elements using indentation -{width}. See the following code snippet to see how to use them.

<div>
    <! -- Utitlies used: underline, decoration-1 -->
    <p class="underline decoration-1">The quick brown fox...</p>
    <! -- Utitlies used: underline, decoration-2 -->
    <p class="underline decoration-2">The quick brown fox...</p>
    <! -- Utitlies used: underline, decoration-4 -->
    <p class="underline decoration-4">The quick brown fox...</p>
</div>
Copy the code

Below is the effect of the above code.

D) Underscore offset

This function is used to control the offset of underscores. You can change the offset of an element’s text underline using indent-offset -{width}. See the following code snippet to see how to use them.

<div>
    <! -- Utitlies used: underline, underline-offset-1 -->
    <p class="underline underline-offset-1">The quick brown fox...</p>
    <! -- Utitlies used: underline, underline-offset-2 -->
    <p class="underline underline-offset-2">The quick brown fox...</p>
    <! -- Utitlies used: underline, underline-offset-4 -->
    <p class="underline underline-offset-4">The quick brown fox...</p>
    <! -- Utitlies used: underline, underline-offset-8 -->
    <p class="underline underline-offset-8">The quick brown fox...</p>
</div>
Copy the code

Below is the effect of the above code.

3. Colored shadows

Colored shadows allow us to add glow, reflections and more natural shadows to colored backgrounds. You can use shadow-{color} to change the color of the shadow. By default, the opacity of colored shadows is 100%, but this can be changed using the “opacity” modifier. See the following code snippet to learn how to use color shadows.

<div>
    <! -- Utilities used: shadow-blue-500/50 -->
    <button class="py-2 px-3 bg-blue-500 text-white text-xs rounded-md shadow-lg shadow-blue-500/50 focus:outline-none">Subscribe</button>
    <! -- Utilities used: shadow-red-500/50 -->
    <button class="py-2 px-3 bg-red-500 text-white text-xs rounded-md shadow-lg shadow-red-500/50 focus:outline-none ml-3">Subscribe</button>
    <! -- Utilities used: shadow-green-500/50 -->
    <button class="py-2 px-3 bg-green-500 text-white text-xs rounded-md shadow-lg shadow-green-500/50 focus:outline-none ml-3">Subscribe</button>
</div>
Copy the code

Below is the effect of the above code.

Colored shadows look more realistic and natural than the default black-based shadows, which tend to be gray.

4. Out-of-the-box colors

By default the Tailwind V3.0 palette comes with more colors out of the box, including: SLATE, gray, Zinc, Neutral, Stone, Red, Orange, amber, yellow, lime, Green, Emerald, turquoise, Sky, blue, indigo, Purple, purple, fuchsia, pink, and Rose. Click on the links below to visit the official documents and learn how to use them. Customizing Colors

5. Arbitrary attributes

Arbitrary attributes allow us to customize CSS, which we can use in conjunction with modifiers such as hover and LG. For example, if we wanted to use the CSS that Tailwind didn’t provide, we could write completely arbitrary CSS using the “square bracket notation”. See the following code snippet to see how to use arbitrary attributes.

<div>
    <! -- Arbitrary Properties used: [font size:24px], [line-height:1.8], [color:#608180] -->
    <div class="[the font - size: 24 px] [line - height: 1.8] text - center [color: # 608180]." ">
        Tailwind is ❤
    </div>
</div>
Copy the code

Below is the effect of the above code.

6. Multi-column layout

Multi-column layouts are used to control the number of columns in an element. You can use columns-{count} to define the number of columns required for the contents of an element. The column width is automatically calculated to match the number. See the following code snippet to see how to use a multi-column layout.

<div>
    <! -- Utility used: columns-3, gap-8 -->
    <div class="relative columns-3 gap-8">
        <! -- This will act as first column -->
        <div class="relative">
            <img class="w-full object-cover rounded-lg" src="https://images.pexels.com/photos/10549951/pexels-photo-10549951.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
        </div>
        <! -- This will act as second column -->
        <div class="relative">
            <img class="w-full object-cover rounded-lg" src="https://images.pexels.com/photos/572897/pexels-photo-572897.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" />
            <img class="w-full object-cover rounded-lg mt-8" src="https://images.pexels.com/photos/3960199/pexels-photo-3960199.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" />
        </div>
        <! -- This will act as third column -->
        <div class="relative">
            <img class="w-full object-cover rounded-lg" src="https://images.pexels.com/photos/2880718/pexels-photo-2880718.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" />
        </div>
    </div>
</div>
Copy the code

Below is the effect of the above code.

7.printThe modifier

The “print” modifier is used to control how a web page appears when someone prints it. You can use the print modifier to control the style that appears only when the page is printed. See the following code snippet to see how to use the print modifier.

<div class="text-center [font-size: 24px]">
    <! -- Utilty used: print:hidden -->
    <! -- The content will be visible when a user visits the page. -->
    <article class="print:hidden">
        <h1>Wanna print this page? 😉</h1>
        <p>You can do so by pressing (ctrl + p) key combination 👌</p>
    </article>
    <! -- Utility used: print:block -->
    <! -- The content will be visible when the someone prints the page -->
    <div class="hidden print:block [font-size:48px]">
        Are you seriously trying to print this? It's secret!
    </div>
</div>
Copy the code

Below is the effect of the above code.

When you try to print the page, you will see something similar to the following image.

Modern aspect ratio APIS

Modern aspect ratio apis are used to control aspect ratios of elements. You can use aspect-{ratio} code to set the preferred aspect ratio for elements. This API uses the native CSS aspect-ratio property, which Safari didn’t support until version 15. By default, Tailwind does not provide much aspect ratio, so we need to define our aspect ratio using arbitrary attributes. Refer to the following code snippet to learn how to use modern aspect ratio apis.

<div>
    <! -- Utilty used: aspect-video -->
    <! -- You can also customize the aspect ratio by using arbitrary values like: aspect-[4/3] -->
    <iframe class="w-full aspect-video" src="https://www.youtube.com/embed/TwXilp2mUtE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
Copy the code

Below is the effect of the above code.

9. Stable real-time engine

Tailwind CSS V3.0 provides a stable JIT engine. Tailwind used AOT engines until version 2.0, which has now been replaced by JIT engines. The benefits of this update are as follows:

  • Very fast build time.
  • All variables are enabled out of the box.
  • CSS is identical in development and production.
  • Browser performance is enhanced in the development environment.

10. Override native form styles

Overwriting native form control styles allows checkboxes, Radio buttons, and File Inputs to be used without redesigning the wheel. Support for the new accent color attribute, as well as the File Input button style modifier, has been added to this release, making it easier to change styles for native form controls.

You can change the color of an element using the accent-{color} code. This overrides the default styles of elements such as checkboxes and radio. See the following code snippet to see how to use the accent Color attribute.

<div>
    <div>
        <label>
            <! -- Utilty used: accent-rose-500 -->
            <input type="checkbox" class="accent-rose-500" checked> Customized Checkbox
        </label>
    </div>
    <div>
        <label>
            <! -- Utilty used: accent-rose-500 -->
            <input type="radio" class="accent-rose-500" checked> Customized Radio
        </label>
    </div>
</div>
Copy the code

To style the File Input button, use the “file” modifier. Refer to the following code snippet to see how to use it.

<div>
    <form class="flex items-center space-x-6">
        <div class="shrink-0">
            <img class="h-16 w-16 object-cover rounded-full bg-blue-100" src="https://tararoutray.com/assets/images/tararoutray.png" alt="Current profile photo" />
        </div>
        <label class="block">
            <span class="sr-only">Choose profile photo</span>
            <! -- Utility used: text-blue-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-normal file:bg-blue-100 file:text-blue-700 hover:file:bg-blue-200 -->
            <input type="file" class="block w-full text-sm text-blue-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-normal file:bg-blue-100 file:text-blue-700 hover:file:bg-blue-200" />
        </label>
    </form>
</div>
Copy the code

Below is the effect of the above code.

Translation: levelup.gitconnected.com/top-10-feat…