Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issue #774 - Update tailwind #1130

Merged
merged 84 commits into from
Apr 17, 2024
Merged

Issue #774 - Update tailwind #1130

merged 84 commits into from
Apr 17, 2024

Conversation

tiagofilipenunes
Copy link
Collaborator

@tiagofilipenunes tiagofilipenunes commented Mar 15, 2024

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

@config "./tailwind.admin.config.js";
@tailwind base;
@tailwind components;
@tailwind utilities;
<div class="flex supports-[display:grid]:grid ...">
  <!-- ... -->
</div>
<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

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

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

![[Pasted image 20240315173533.png]]

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

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

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

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

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>
  )
}

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>

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

Update v4 (currently alpha)

New engine: Oxide

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

Copy link

cloudflare-workers-and-pages bot commented Mar 15, 2024

Deploying carbon-app with  Cloudflare Pages  Cloudflare Pages

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

View logs

@tiagofilipenunes tiagofilipenunes marked this pull request as ready for review March 18, 2024 19:50
Copy link
Collaborator

@GrandSchtroumpf GrandSchtroumpf left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

src/components/common/WarningMessageWithIcon.tsx Outdated Show resolved Hide resolved
src/components/common/TokenInputField/TokenInputField.tsx Outdated Show resolved Hide resolved
src/components/common/calendar/index.tsx Show resolved Hide resolved
src/components/common/tabs/TabsMenuButton.tsx Outdated Show resolved Hide resolved
src/components/core/menu/mainMenu/MainMenuRight.tsx Outdated Show resolved Hide resolved
src/components/trade/settings/TradeSettingsRow.tsx Outdated Show resolved Hide resolved
@tiagofilipenunes tiagofilipenunes merged commit 58f51e8 into main Apr 17, 2024
1 check was pending
@tiagofilipenunes tiagofilipenunes deleted the issue-#774 branch April 17, 2024 13:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Update Tailwind to the latest version
2 participants