Tailwindcss JIT integration with Sage 10

sage
41

That didn’t seem to work:

@ start C:\Users\44775\Desktop\Web Development\Clients\xxx\wp-content\themes\kayTheme
TAILWIND_MODE=watch mix watch

‘TAILWIND_MODE’ is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ start: TAILWIND_MODE=watch mix watch
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

42

Hi the Mosaad,

When I configure tailwind like you do. It only recognizes the extended classes and not the base classes of tailwind. How did you fix this?

43

There’s no issue with using mix watch on its own. They added TAILWIND_MODE= variable to so it closes after running yarn build.

44

By “recognizing”, do you mean the auto complete or it doesn’t include them in the build css file?

45

I added the color red as an extend

   extend: {
      colors: {
        red: {
          DEFAULT: '#E20613',
        },
    }

When I look in the build file I only see a couple of colors coming through like red. All other base colors are missing or incomplete in the build file.

46

Even red isn’t totally complete. I only find red-400 and red.

47

It seems that the problem is with the classes added dynamically by acf fields. How can I make sure they get compiled too?

48

Have a dummy component/view file with those classes as there’s no way to whitelist classes with JIT mode yet.

1 Like
49

Okay thanks for the help. That this didn’t cross my mind. :upside_down_face:

50

FYI: for Tailwind IntelliSense to work with JIT mode, you still need to define variants in tailwind.config.js.
A shortcut to generate all possible variants is to define them as below:

  variants: [
    `responsive`,
    `dark`,
    `motion-safe`,
    `motion-reduce`,
    `first`,
    `last`,
    `odd`,
    `even`,
    `visited`,
    `checked`,
    `group-hover`,
    `group-focus`,
    `focus-within`,
    `hover`,
    `focus`,
    `focus-visible`,
    `active`,
    `disabled`,
  ],
2 Likes
51

This topic was automatically closed after 42 days. New replies are no longer allowed.