Issue #774 - Update tailwind

[tiagofilipenunes]

Fix #774

Todo

• Update to 3.2.7 and fix styling changes
• Update to 3.3.7 and fix styling changes
• Update to 3.4.1
• Update tailwind-merge
• Update tailwind prettier plugin
• Update aria-selectors

Note

• With the new tailwind update, cn() must be used to merge className when it is passed as a prop to the component, to ensure correct tailwind tag precedence.

Changelog

Update v3.2

Announcement: https://tailwindcss.com/blog/tailwindcss-v3-2

• Multiple config files in one project using @config

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

• Conditionally style based on browser support In the example, if display:grid is supported by the browser, then the grid tag will be applied

<div class="flex supports-[display:grid]:grid ...">
  <!-- ... -->
</div>

• ARIA attribute variants
  Allows to conditionally style things based on aria properties.

<span class="bg-gray-600 aria-checked:bg-blue-600" aria-checked="true" role="checkbox">
  <!-- ... -->
</span>

Default available selectors:

• aria-checked
• aria-disabled
• aria-expanded
• aria-hidden
• aria-pressed
• aria-readonly
• aria-required
• aria-selected

Custom ones can be added to tailwind.config.js

• Data attribute variants.

Can conditionally style based on data attributes. Can be used to style elements based on their data-test-id for example, when using playwright.

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

<!-- Will not apply -->
<div data-size="medium" class="data-[size=large]:p-8">
  <!-- ... -->
</div>

<!-- Generated CSS -->
<style>
  .data-\[size\=large\]\:p-8[data-size="large"] {
    padding: 2rem;
  }
</style>

Shortcuts can be configured in tailwind.config.js

• Max width and dynamic breakpoints

Allows to set properties using max-width properties with the max- tag:

<div class="md:max-xl:sr-only">
  <!-- ... -->
</div>

instead of

<div class="md:sr-only xl:not-sr-only">
  <!-- ... -->
</div>

Arbitrary values are also now accepted:

<div class="min-[712px]:max-[877px]:right-16 ...">
  <!-- ... -->
</div>

Requires tailwind.config.js screens configuration to be simple (not using max-width)

• Dynamic .group and .peer variants

Allows to create custom group-* and peer-* variants:

<div class="group is-published">
  <div class="hidden group-[.is-published]:block">
    Published
  </div>
</div>

Generated:

.group.is-published .group-\[\.is-published\]\:block {
  display: block;
}

<div>
  <input type="text" class="peer" />
  <div class="hidden peer-[:nth-of-type(3)_&]:block">
    <!-- ... -->
  </div>
</div>

Generated:

:nth-of-type(3) .peer ~ .peer-\[\:nth-of-type\(3\)_\&\]\:block {
  display: block;
}

• Dynamic variants with matchVariant

Allows to create custom variants. Here’s an example of creating a placement-* variant for some imaginary tooltip library that uses a data-placement attribute to tell you where the tooltip is currently positioned:

let plugin = require("tailwindcss/plugin");

module.exports = {
  // ...
  plugins: [
    plugin(function ({ matchVariant }) {
      matchVariant(
        "placement",
        (value) => {
          return `&[data-placement=${value}]`;
        },
        {
          values: {
            t: "top",
            r: "right",
            b: "bottom",
            l: "left",
          },
        }
      );
    }),
  ],
};

How to use it then:

<div class="placement-t:mb-2 ...">
  <!-- ... -->
</div>

Custom values that are not specified in tailwind.config.js can also be added in square brackets:

<div class="placement-[top-start]:mb-2 ...">
  <!-- ... -->
</div>

There's a sort function provided to add right precedence with respect to other values that come from the same variant.

• Nexted group and multiple peer support with variant modifiers
  When there are multiple groups or peers, allows to specify which ones are affected by the styling.

<div class="group/sidebar ...">
  <!-- ... -->
  <div class="group/navitem ...">
    <a
      href="#"
      class="opacity-50 group-hover/sidebar:opacity-75 group-hover/navitem:bg-black/75"
    >
      <!-- ... -->
    </a>
  </div>
  <!-- ... -->
</div>

Others:

• Add new relative: true option to resolve content paths relative to the config file (#9396)
• Add new break-keep utility for word-break: keep-all (#9393)
• Add new collapse utility for visibility: collapse (#9181)
• Add new fill-none utility for fill: none (#9403)
• Add new stroke-none utility for stroke: none (#9403)
• Add new place-content-baseline utility for place-content: baseline (#9498)
• Add new place-items-baseline utility for place-items: baseline (#9507)
• Add new content-baseline utility for align-content: baseline (#9507)
• Add support for configuring default font-feature-settings for a font family (#9039)
• Add standalone CLI build for 32-bit Linux on ARM (node16-linux-armv7) (#9084)
• Add future flag to disable color opacity utility plugins (#9088)
• Add negative value support for outline-offset (#9136)
• Add support for modifiers to matchUtilities (#9541)
• Allow negating utilities using min/max/clamp (#9237)
• Implement fallback plugins when there is ambiguity between plugins when using arbitrary values (#9376)

Update v3.3

Announcement: https://tailwindcss.com/blog/tailwindcss-v3-3

• Darker darks with -950 shades

![[Pasted image 20240315173533.png]]

• Simplified support for RTL

Allows to use start and end of element instead of specifying a different style for ltr and rtl.

Example:

Before:

<div class="group flex items-center">
  <img class="shrink-0 h-12 w-12 rounded-full" src="..." alt="" />
  <div class="ltr:ml-3 rtl:mr-3">
    <p class="text-sm font-medium text-slate-300 group-hover:text-white">...</p>
    <p class="text-sm font-medium text-slate-500 group-hover:text-slate-300">...</p>
  </div>
</div>

After:

<div class="group flex items-center">
  <img class="shrink-0 h-12 w-12 rounded-full" src="..." alt="" />
  <div class="ms-3">
    <p class="text-sm font-medium text-slate-300 group-hover:text-white">...</p>
    <p class="text-sm font-medium text-slate-500 group-hover:text-slate-300">...</p>
  </div>
</div>

New logical LTR and RTL properties have been added for inset, margin, padding, border-radius, scroll-margin, and scroll-padding

• ESM and Typescript support
  Tailwind can be configured in ESM or typescript, by running

npx tailwindcss init --esm

or

npx tailwindcss init --ts

• Fine-tuned gradient colour positions

Using utilities like from-5%, via-35% and to-85%, the position of each colour in a gradient can be adjusted:

<div class="bg-gradient-to-r from-indigo-500 from-[21.56%] via-purple-500 via-30% to-pink-500 to-90% ...">
  <!-- ... -->
</div>

• Line-clamp library built-in to the framework

Line-clamp was previously an official tailwind css plugin but has now been built-in to the framework. Line-clamp is a plugin for truncating text to a specific number of lines.

• Line-height shorthand

Can now set line-height and font-size in a single utility, similarly to the color/opacity syntax:

Before:

  <p class="text-lg leading-7 ...">
    So I started to walk into the water. I won't lie to you boys, I was terrified. But
    I pressed on, and as I made my way past the breakers a strange calm came over me.
    I don't know if it was divine intervention or the kinship of all living things but
    I tell you Jerry at that moment, I <em>was</em> a marine biologist.
  </p>

After:

  <p class="text-lg/7 ...">
    So I started to walk into the water. I won't lie to you boys, I was terrified. But
    I pressed on, and as I made my way past the breakers a strange calm came over me.
    I don't know if it was divine intervention or the kinship of all living things but
    I tell you Jerry at that moment, I <em>was</em> a marine biologist.
  </p>

Arbitrary values are also supported, like text-sm/[17px].

• Use CSS variables without var()

Before:

export function MyComponent({ company }) {
  return (
    <div
      style={{
        '--brand-color': company.brandColor,
        '--brand-hover-color': company.brandHoverColor,
      }}
      className="bg-[var(--brand-color)] hover:bg-[var(--brand-hover-color)]"
    />
  )
}

After:

export function MyComponent({ company }) {
  return (
    <div
      style={{
        '--brand-color': company.brandColor,
        '--brand-hover-color': company.brandHoverColor,
      }}
      className="bg-[--brand-color] hover:bg-[--brand-hover-color]"
    />
  )
}

• New list-style image utilities
  Can now use images as item markers.

<ul class="list-image-[url(checkmark.png)] ...">
  <li>5 cups chopped Porcini mushrooms</li>
  <!-- ... -->
</ul>

• Configure font variation settings for custom font families
  Could set font-feature-settings before from 3.2, but can now also set font variation settings.

Example:

module.exports = {
  theme: {
    fontFamily: {
      sans: [
        'Inter var, sans-serif',
        {
          fontFeatureSettings: '"cv11", "ss01"',
          fontVariationSettings: '"opsz" 32',
        },
      ],
    },
  },
}

cv11 is a character variant, opsz is the font's axis variable followed by a number setting it to a different value than default

• New caption-side utilities
  Used for <caption> elements, can set its position for example.

Example:

<table>
  <caption class="caption-bottom">
    Table 3.1: Professional wrestlers and their signature moves.
  </caption>
  <thead>
    <tr>
      <th>Wrestler</th>
      <th>Signature Move(s)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>"Stone Cold" Steve Austin</td>
      <td>Stone Cold Stunner, Lou Thesz Press</td>
    </tr>
    <tr>
      <td>Bret "The Hitman" Hart</td>
      <td >The Sharpshooter</td>
    </tr>
    <tr>
      <td>Razor Ramon</td>
      <td>Razor's Edge, Fallaway Slam</td>
    </tr>
  </tbody>
</table>

Others:

• Added support for break-spaces
• Add delay-0 and duration-0 utilities (#10294)
• Add justify-normal and justify-stretch utilities (#10560)
• Add content-normal and content-stretch utilities (#10645)
• Add hyphens utilities (#10071)

Update v3.4

Announcement: https://tailwindcss.com/blog/tailwindcss-v3-4

• Dynamic viewport utils

Introduce dvh, lvh, svh.

https://caniuse.com/viewport-unit-variants - 92.82% global support

Description of the dynamic viewport lengths:
https://www.w3.org/TR/css-values-4/#viewport-relative-lengths

Class	CSS
h-svh	height: 100svh
h-lvh	height: 100lvh
h-dvh	height: 100dvh
min-h-svh	min-height: 100svh
min-h-lvh	min-height: 100lvh
min-h-dvh	min-height: 100dvh
max-h-svh	max-height: 100svh
max-h-lvh	max-height: 100lvh
max-h-dvh	max-height: 100dvh
min-h-[75dvh]	min-height: 75dvh
Glossary:

• Viewport Height: Relative unit representing a percentage of the browser's window height. Useful for sections that scale dynamically with the window size.

• Dynamic Viewport Height: A newer relative height measure that adjusts according to changes in the viewport's size. It reacts to events like device rotation, screen sizing, etc.

• Small Viewport Height: The viewport sized assuming any user-agent interfaces that are dynamically expanded and retracted to be expanded. Removes the auto-sizing issues present in dvh.

• Large Viewport Height: The viewport sized assuming any user-agent interfaces that are dynamically expanded and retracted to be retracted. Content sized using lvh might be hidden behind such interfaces when they are expanded.

• has() variant

Adds the versatile :has() pseudo-class. Allows to style an element based on its children or subsequent siblings.

https://caniuse.com/css-has - 92.11% global support

Example:

export function Input({ ... }) {
  return (
    <span className="has-[:disabled]:opacity-50 ...">
      <input ... />
    </span>
  )
}

• Style children with the *-variant
  Style children from the parent using a variant such as *:rounded-full

Example:

<div>
  <h2>Categories:<h2>
  <ul class="*:rounded-full *:border *:border-sky-100 *:bg-sky-50 *:px-2 *:py-0.5 dark:text-sky-300 dark:*:border-sky-500/15 dark:*:bg-sky-500/10 ...">
    <li>Sales</li>
    <li>Marketing</li>
    <li>SEO</li>
    <!-- ... -->
  </ul>
</div>

• New size-* utilities

Using size-x replaces h-x w-x.

Before:

<div>
  <img class="h-10 w-10" ...>
  <img class="h-12 w-12" ...>
  <img class="h-14 w-14" ...>
</div>

After:

<div>
  <img class="size-10" ...>
  <img class="size-12" ...>
  <img class="size-14" ...>
</div>

• Balanced headlines with text-wrap utilities
  Can use text-balance, text-pretty in text-wrap utilities.

• Subgrid support
  Supports the subgrid CSS feature.

https://caniuse.com/css-subgrid - 86.51% of global support

• Extended min-width, max-width and min-height scales
  Extended to include the full spacing scale.

• Opacity scale extended
  Supports every step of 5

• Supported for forced-colors variant and new forced-color-adjust utilities

Update v4 (currently alpha)

New engine: Oxide

https://tailwindcss.com/blog/tailwindcss-v4-alpha#a-new-engine-built-for-speed

[cloudflare-pages]

Deploying carbon-app with    Cloudflare Pages

Latest commit:	3e9059c
Status:	⚡️  Build in progress...

View logs

[GrandSchtroumpf]

Great work overall. I'm surprised with the amount of new !important though