Tailwind v4: how do I define reusable custom utilities?

Dev Overflow

Home

Community

Collections

Find Jobs

Tailwind v4: how do I define reusable custom utilities?

asked 1 month ago

912

In v3 I had a tailwind.config.js with a plugin that added things like .flex-center. v4 dropped the JS config in favour of CSS. Where do custom utilities go now?

tailwindcss

react

1 Answer

Marcus Lee

• answered 1 month ago

Use the @utility directive directly in your CSS:

1@utility flex-center {
2  @apply flex justify-center items-center;
3}
4
5@utility background-light900_dark200 {
6  @apply bg-light-900 dark:bg-dark-200;
7}

1@utility flex-center {
2  @apply flex justify-center items-center;
3}
4
5@utility background-light900_dark200 {
6  @apply bg-light-900 dark:bg-dark-200;
7}

Utilities declared this way work with every variant, so hover:flex-center and md:background-light900_dark200 both compile. Design tokens go in @theme:

1@theme {
2  --color-primary-500: #ff7000;
3}

1@theme {
2  --color-primary-500: #ff7000;
3}

of 1

Write your answer here

Top Questions

Git: how do I undo a commit I already pushed?

Rust: what is the actual difference between String and &str?

How should I hash passwords in 2026 — bcrypt, scrypt, or argon2?

Is storing a JWT in localStorage really that dangerous?

What is the difference between unit, integration, and e2e tests in practice?

Popular Tags

Global search

Tailwind v4: how do I define reusable custom utilities?

1 Answer

Write your answer here

Top Questions

Popular Tags