Tailwind & Related Things

Best practices

(source) Don’t use @apply just to make things look “cleaner”. Otherwise you are basically just writing CSS again and throwing away all of the workflow and maintainability advantages Tailwind gives you.
Play with tailwind

Tailwind v4

Default theme variable reference
All directives like @theme, @source, @plugin
Define custom font weight

// old in tailwind.config.ts
theme {
  extend: {
    fontWeight: {
      inherit: 'inherit'
    }
  }
}

// new in globals.css
@theme {
  --font-weight-inherit: 'inherit'
}

Alternative to content in old config -> @source
Imports plugins:

@plugin 'tailwindcss-animate';
@plugin '@tailwindcss/typography';

Use @utilities instead of @layer utilities

// old
@layer utilities {
  .custom-class {...}
  .another {
    @apply hover:custom-class; // <- error in v4, undefined custom-class
  }
}

// new v4
@utility custom-class {...}
.another {
  @apply hover:custom-class;
}

`group-hover` with `prefix`

<div class="tw-group">
  <div class="group-hover:tw-bg-slate-500"></div>
</div>

`:not` in tailwind

Example: Don’t apply :hover effect on the :disabled button

[&:not(:disabled)]:hover:tw-bg-gray-500

Color preview doesn’t show in VSCode

If you have a custom color in tailwind config file that is CSS Variables, It will not show preview in VSCode (preview = a square containing the color before the class)

{
  theme: {
    extend: {
      colors: {
        'custom': 'var(--custom-color)', // not show
        'hello': '#000', // show
      }
    }
  }
}