Tailwind breaking in migration to v3

[petermkr]

Description

My gatsby project is using TailwindCSS together with postcss-preset-env to enable the usage of variables like var(--color-black) to write CSS. This breaks when upgrading Gatsby to v3.

Steps to reproduce

Repo with minimal example:
https://gitlab.com/petermkr/gatsby-tailwind-problems/-/branches

Expected result

See branch gatsby2, the working version which displays a black background. The background should still be black in v3.

Actual result

See branch gatsby3 . In this branch, only the Gatsby dependencies were updatedto v3 which then causes that var(--color-black) is no longer correctly translated.

Environment

System:
OS: Linux 5.8 Ubuntu 20.04.2 LTS (Focal Fossa)
CPU: (8) x64 Intel(R) Core(TM) i5-10210U CPU @ 1.60GHz
Shell: 5.0.17 - /bin/bash
Binaries:
Node: 14.15.5 - ~/.nvm/versions/node/v14.15.5/bin/node
npm: 6.14.11 - ~/.nvm/versions/node/v14.15.5/bin/npm
Browsers:
Firefox: 87.0
npmPackages:
gatsby: ^2.32.12 => 2.32.12
gatsby-plugin-postcss: ^3.7.0 => 3.7.0
npmGlobalPackages:
gatsby-cli: 3.2.0
gatsby: 2.32.4

[blackcater]

I think it might be the "problem" from tailwindcss.

If you want use CSS variables, You can use like bellow:

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      primary: 'var(--color-primary)',
      secondary: 'var(--color-secondary)',
      // ...
    }
  }
}

/* In your CSS */
:root {
  --color-primary: #5c6ac4;
  --color-secondary: #ecc94b;
  /* ... */
}

@tailwind base;
@tailwind components;
@tailwind utilities;

https://tailwindcss.com/docs/customizing-colors#naming-your-colors

[celiasaumell]

It worked in v3 to remove :root code from g_root.css:
:root { --color-black: theme("colors.black"); }
and move it into index.css.

It also worked following blackcater's comment above without moving :root out of g_root.

[petermkr]

Thanks for your answers! They guided me to the solution: It was important to configure postcss-import correctly as shown in
https://tailwindcss.com/docs/using-with-preprocessors.