[SOLVED] Shopify Hydrogen - setting up tailwind

Shopify Hydrogen - setting up tailwind

I am trying to set up Tailwind in a Shopify Hydrogen React project (Remix) on local dev.

Tailwind in the current Remix is by way of postCSS. Postcss-import is added and configured.

postcss.config.js...

module.exports = {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': {},
    tailwindcss: {},
    'postcss-preset-env': {
      features: {'nesting-rules': false},
    },
  },
};

In my App.css I have

@tailwind base;
@import 'custom/base.css';

@tailwind components;
@import 'custom/components.css';

@tailwind utilities;
@import 'custom/utilities.css';

But the problem ... while the @Tailwind includes work fine, the custom imports are not working.

So if I place the following within app.css...

@base {
 /*styles goes here*/
}

...then it will work fine but not in any @imported files.

Ideally I want to be able to split my files up rather than have one huge single app.css.

But if I place this @base {} code into another file and import it, it does not work. The import fails silently.

Same problem with components / utilities.

remix.config.js...

...
 future: {
    unstable_postcss: true,
    unstable_tailwind: true,
    v2_meta: true,
    v2_routeConvention: true,
    v2_errorBoundary: true,
    v2_normalizeFormMethod: true,
  },
...

Any ideas? Thanks.

UPDATE

Thanks to @stickyuser it's now clear what the problem is...

Because it's PostCSS, imports need to come first. But most of the Tailwind documents tells you to put the base, components and utilities references at the top (so you can't just put your overrides below e.g. "@tailwind base" because you wouldn't be overriding if you had the overrides first and you would be inviting unknown results). So you just need to change the e.g. @tailwind base to the import statement below. This means the Tailwind declarations should look like this...

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

...then, you can add all your layer overrides...

/* Root or reset styles */
@import 'root/root.css';

/* Base layer overrides */
@import 'base/base.css';
@import 'base/headers.css';

/* Component layer overrides */
@import 'components/components.css';
@import 'components/images.css';
@import 'components/buttons.css';

/* Utility layer overrides */
@import 'utilities/utilities.css';

It's also explained in the official Tailwind documents, although requires some knowledge for the penny to drop.

https://tailwindcss.com/docs/using-with-preprocessors

The end result is that files can be split and inside contain the e.g. @layer base {} making the project more manageable. The layers are important to respect because this will indicate to Tailwind the order in which classes should be applied.

Solution

All the @import statements need to go before anything else.

https://www.npmjs.com/package/postcss-import

See: "This plugin attempts to follow the CSS @import spec; @import statements must precede all other statements"

NOTE: It looks like you will be able to mix @tailwind and @import rules but it is currently unreleased: https://github.com/tailwindlabs/tailwindcss/pull/11239