[V4] Setting Up Tailwind v4.1 in WordPress

[deepentim]

I installed Tailwind V4.1.3 for Wordpress, but it came with just 381 lines of code on the output file.
I followed the CLI option to install it. https://tailwindcss.com/docs/installation/tailwind-cli

Steps, I followed:

1. npm install tailwindcss @tailwindcss/cli
2. @import "tailwindcss";
3. npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch

Here's the starting of the output file

*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */
/*!
Theme Name: WordPress + Tailwind
*/
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
...

[wongjn]

There is no "complete codes/classes". As per the documentation:

Tailwind works by scanning your project for utility classes, then generating all of the necessary CSS based on the classes you've actually used.

[deepentim]

Turns out that classes set on the backend don't work. I'd need to put the classes on the template.html file inside the template directory for the watch process to compile?

Also, how do I override the default classes by @layer utilities classes? The Tailwind classes are not taking priority over default classes.

E.g. classes like flex, justify-between are not overriding the default classes (Below output).

Output

I saw another discussion about it: https://github.com/tailwindlabs/tailwindcss/discussions/16578. But could not figure out the solution for Wordpress, as the default classes are set on the HTML page itself as an inline CSS (CSS rule at https://website.com:2,510 (no external css file).

[wongjn]

I'd need to put the classes on the template.html file inside the template directory for the watch process to compile?

Yes.

Also, how do I override the default classes by @layer utilities classes?

You could pop the Tailwind utilities outside of any layer:

@layer theme, base, components, utilities;

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css";

Or if you still need further precedence, you can wrap the utilities in some high-specificity selector:

@layer theme, base, components, utilities;

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);

:is(#a, *) {
  @tailwind utilities;
}

[deepentim]

Where should I put these lines? In the source input.css file like this?
I tried the below, but it did not work.

Also added the below lines to the same input.css, it also did not work. May be I'm missing something?

@import "tailwindcss";
@layer theme, base, components, utilities;

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);

:is(#a, *) {
  @tailwind utilities;
}

[wongjn]

You don't need the first @import "tailwindcss";:

@layer theme, base, components, utilities;

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);

:is(#a, *) {
  @tailwind utilities;
}

[deepentim]

Thanks, the second option worked. Wonder why the first approach does not work.

[wongjn]

In the first approach you're including Tailwind twice

[suasgn]

For Gutenberg/Blocks Editor use-case, we have a simple and free workaround on https://github.com/wind-press/windpress