Node 20.18.3+ compatibility

[joshuafredrickson]

Attempting to use fluid-tailwind with any Node version above 20.18.3 throws the following error. This error does not occur if switching back to Node 20.18.3.

│ │ Module build failed (from ../node_modules/postcss-loader/dist/cjs.js):
│ │ SyntaxError
│ │ (6:3) resources/styles/common/global.css The `~text-base/lg` class does not exist. If `~text-base/lg` is a custom class, make
│ │ sure it is defined within a `@layer` directive.
│ │   4 | 
│ │   5 | :root {
│ │ > 6 |   @apply ~text-base/lg;
│ │     |   ^

Full tailwind.config.js:

import fluid, {extract, screens, fontSize} from 'fluid-tailwind';

/** @type {import('tailwindcss').Config} config */
const config = {
  content: {
    files: ['./app/**/*.php', './resources/**/*.{php,vue,js,jsx}'],
    extract,
  },
  theme: {
    fontSize,
    screens,
  },
  corePlugins: {},
  plugins: [
    fluid,
  ],
};

export default config;

[mgorabbani]

any updates on this?

[gluharry]

When I import "tailwindcss/defaultTheme"; in my tailwind.config before fluid-tw, then I dont have this error, which is just a workaround.

[gluharry]

This is another workaround, without importing defaultTheme:

const require = createRequire(import.meta.url);
const { extract, screens, default: fluid } = require("fluid-tailwind");