A better way to use Tailwind

Tuesday, December 13, 2022
Tags: tailwind css

Default Tailwind setup:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  /* … */
}

Instead, use standard CSS @layers:

@layer tailwind-base, tailwind-components, my-styles, tailwind-utilities;

@layer tailwind-base { @tailwind base; }
@layer tailwind-components { @tailwind components; }
@layer tailwind-utilities { @tailwind utilities; }

@layer my-styles {
  /* … */
}

Use theme() instead of @apply:

No:

img { @apply border-2xl; }

Yes:

img { border-radius: theme(borderRadius.2xl); }

Sources