The Latest Features Introduced in Tailwind CSS

Tailwind CSS is a well-known utility-first CSS framework known for its versatility and simplicity. The framework provides significant features with each new iteration, allowing developers to construct fast and aesthetically attractive online experiences. In this article, we will look at the most recent Tailwind CSS features and developments, and how they may improve your development workflow and push your projects to the next level.

Here we are listing features which are newly added after version 3.0

The extended color palette for darker darks

One of the most common feature developers wants is to add darker shades for every color — usually because someone is building a dark UI and just wants more options down in that dark end of the spectrum.

Tailwind css version v3.3 added a new 950 shade for every single color.

So now we can able to pass shade like

bg-gray-950 , text-red-950 etc..

<div class="flex gap-1 justify-center h-screen items-center">
  <div class="h-4 w-4 bg-red-800"></div>
  <div class="h-4 w-4 bg-red-900"></div>
  <div class="h-4 w-4 bg-red-950"></div>
</div>

We can clearly differnciate the shades from below image.

Logical Properties

Tailwind CSS added logical property utilities for insert, margin, padding, border-radius, scroll-margin, and scroll-padding.

Here I am showing some of them

<div class="flex h-screen w-full items-center justify-center gap-4">
  <div class="mt-5 flex h-8 w-16 rounded-s-lg bg-blue-600"></div>
  <div class="mt-5 flex h-8 w-16 rounded-e-lg bg-blue-600"></div>
  <div class="mt-5 flex h-8 w-16 rounded-t-lg bg-blue-600"></div>
  <div class="bo mt-5 flex h-8 w-16 border-4 border-s-slate-800 bg-blue-600"></div>
  <div class="bo mt-5 flex h-8 w-16 border-4 border-r-gray-950 bg-blue-600"></div>
  <div class="bo ms-10 mt-5 flex h-8 w-16 bg-blue-600"></div>
</div>

The result of the above looks like this

You can find a list of all of the new utilities in the official documentation link

Adjust the gradient colour stop places

Tailwind adds new utilities like from-5%, via-35%, and to-85% that let you adjust the actual position of each color stop in your gradients

<div class="flex h-screen w-full items-center justify-center gap-4 px-5">
  <div class="h-10 w-full bg-gradient-to-r from-rose-500 from-20% via-fuchsia-500 via-60% to-indigo-500 to-90%"></div>
</div>

And the Gradian looks like the below image

Line-clamp utility

The line-clamp property is used to truncate text and limit it to a specified number of lines. It allows you to control how overflowing text is displayed within a container when there is not enough space to show the complete text. Tailwind's new update added this utility to it's documentation.

<div class="flex h-screen w-full items-center justify-center gap-4">
  <div class="h-auto w-1/4 rounded-md border border-gray-900 bg-zinc-900 p-2">
    <p class="line-clamp-3 text-white/75">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repudiandae veritatis earum nostrum corrupti voluptates?</p>
  </div>
</div>

Output of Line clamp example is looks like this

Font-size utilities now include a new line-height shortcut

Tailwind CSS so impressed users with its color opacity modifier syntax that makes it feasible to save a few characters by combining them with a single utility:

before we writing like

className="text-lg leading-7"

which replace as

className="text-lg/7"

User can able to customize leading from 3 to 10.

List-style-image utilities

By using tailwind CSS we can able customize the unordered list style icon and by the below example car.png will be set instead of black bullets.

<ul class="list-image-[url(car.png)]">
  <li>TATA</li>
  <li>Hundai</li>
  <li>Toyata</li>
</ul>

Tailwind also provides functionality for modifying disc color as well

<div class="flex h-screen items-center justify-center bg-gray-900">
  <ul class="list-disc space-y-3 pl-5 text-slate-400 marker:text-fuchsia-700">
    <li>React JS</li>
    <li>Next JS</li>
    <li>Tailwind CSS</li>
  </ul>
</div>

Hyphens

Controlling how words are hyphenated using utilities It can be taken in the whole paragraph when we set it to hyphens-auto. If the user wants to pass in some specific part then set it to hyphens-manual and pass ­ where it to apply.

<div class=" flex h-screen w-full items-center justify-center gap-4">
  <div class="h-auto w-1/4 hyphens-auto rounded-md border border-gray-900 bg-blue-900 p-2" lang="de">
    <p class="text-white/75">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius necessitatibus veroadrerum quia fugiat ea ullam pariatur.</p>
  </div>
  <div class="h-auto w-1/4 hyphens-manual rounded-md border border-gray-900 bg-blue-900 p-2" lang="de">
    <p class="text-white/75">Lorem ipsum dolor sit amet consectetur adipi&shy;sicing elit. Eius necessitatibus veroadrerum quia.</p>
  </div>
</div>

Table Caption

In the table, the caption is used to put information about a table. Tailwind CSS added one utility for it like caption-top ,caption-bottom.

<div class="flex h-screen items-center justify-center">
  <table class="border-separate border-spacing-2 border border-slate-500">
    <caption class="caption-bottom">
      Copyrights @2023
    </caption>
    <thead>
      <tr>
        <th class="border border-slate-600 bg-blue-900 p-2 text-white">Name</th>
        <th class="border border-slate-600 bg-blue-900 p-2 text-white">Expereience</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="border border-slate-600 p-2">Test</td>
        <td class="border border-slate-600 p-2">1.5</td>
      </tr>
    </tbody>
  </table>
</div>

Using @config, you may have many configuration files in one project

Tailwind CSS added a @config directive that you can use in a CSS file to specify which Tailwind CSS config to use for that file.

This makes it much easier to create several Tailwind-configured stylesheets in the same project. For example, you may have one configuration file for the front end of your site and another for the admin/backend.

Technically, this has always been possible with enough webpack magic, but the new @config directive makes it very simple and accessible to everyone, even in projects where you don't have as much control over the build tool setup.

Users will able to create multiple files inside styles in the project and import different @config inside it like

@config "./tailwind.admin.config.js";
@tailwind base;
@tailwind components;
@tailwind utilities;

Data attribute variants

By using Tailwind CSS now conditionally style things based on data attributes with the new data-* variants.

<div data-size="large" class="data-[size=large]:p-8 p-0">
  <!-- ... -->
</div>

Combination of max width with dynamic breakpoint

• Here is below example illustrates that text size for a particular breakpoint

<span class="text-4xl max-md:text-xl">Lorem ipsum dolor sit am.</span>

• If the user want to hide a particular section for between breakpoint it will also be possible like this

<div class="md:sr-only lg:not-sr-only">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam quae, rerum rem esse expedita, mollitia itaque ab cumque tempora vitae inventore quia incidunt .
</div>

Above code illustrate that text is only hidden in between of md to lg tailwind CSS breakpoint.

• If the user wants to add a particular CSS between particular pixels Now it is also possible.

<div class="min-[712px]:max-[877px]:bg-gray-700">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem excepturi, cumque soluta saepe commodi, incidunt, provident obcaecati consequuntur dolorum voluptate iusto assumenda omnis at harum aliquam odio nam porro minus.</div>

In the above example, the color will only apply for between 712px to 877px.

Nested group and multiple peer support with variant modifiers

It becomes sometimes too much complex to use multiple groups, and when using multiple groups there is no other way to differentiate it.

Tailwind introducing support for variant modifiers, which are a new dynamic chunk that you can add at the end of a variant that allows you to assign a unique identity to each group.

<div class="group/sidebar text-2xl">
  First
  <div class="group/navitem">
    <a href="#" class="opacity-50 group-hover/navitem:bg-black/75 group-hover/sidebar:opacity-75"> second </a>
  </div>
  third
</div>

The above example shows you How to handle the opacity of the background and text to handle in multiple group hover.

Automatic Class Sorting with Prettier

Developers always like sorting to increase readability, Tailwind CSS lunch it's one plugin that sorts all the class's utilities automatically.

Package to add

npm install -D prettier prettier-plugin-tailwindcss

Colored box shadows

Tailwind CSS Create a new feature of colored shadow.

<div class="flex h-screen items-center justify-center gap-4">
  <button class="rounded-xl bg-green-700 p-2 font-bold text-white shadow-lg shadow-green-700/70">Subscribe</button>
  <button class="rounded-xl bg-blue-500 p-2 font-bold text-white shadow-lg shadow-blue-500/50">Subscribe</button>
  <button class="rounded-xl bg-fuchsia-700 p-2 font-bold text-white shadow-lg shadow-fuchsia-700/50">Subscribe</button>
</div>

Output will be looks like

Multi-column layout

If the user wants to make a layout like a newspaper for large text content these layout features will help.

<div class="columns-1 p-8 sm:columns-3">
  <p class="font-medium text-gray-700">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi autem necessitatibus nobis repudiandae recusandae quos ea minima? Sed consequuntur quia adipisci ratione expedita debitis consequatur magnam et, temporibus ex recusandae. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa deserunt, alias aliquam est a harum aperiam quae nulla quo similique excepturi, sit laboriosam sunt dolorem quod vitae ex sed! Est?Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur veniam corporis dolorem numquam quas deleniti nemo modi, rem voluptatibus neque libero blanditiis, recusandae doloremque atque eveniet ab facere aut ex.</p>
</div>

The output will look like

Elegant underline styles

In tailwind CSS It can be added to change underline colors, thickness, and more.

<div class="flex h-screen items-center bg-gray-800 p-4 text-xl text-white/75">
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit dolor maio
    <a href="#" class="underline decoration-sky-500 decoration-2">My Company, Inc</a>. Outside of work, I like to <a href="#" class="underline decoration-pink-500 decoration-dotted decoration-2">watch pod-racing</a> and have <a href="#" class="underline decoration-indigo-500 decoration-wavy decoration-2">light-saber</a>
    fights.
  </p>
</div>