Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

PostCSS config does not reach imported libs

See original GitHub issue

Current Behavior

@apply utility works on apps level but not on libs

Expected Behavior

Should be able to use tailwind’s @apply utility.

Steps to Reproduce

https://github.com/med-albert/tailwind-lib-test Note: JIT mode is enabled.

apps
  app1
    src-app
      app.module.css - tailwind @apply works
      app.tsx -  - tailwind works
    postcss.config.js
    tailwind.config.js
libs
  shared-components
    src
      button.module.css - tailwind @apply don't work, normal css tag works
      button.tsx -  - tailwind works

Environment

OS   : darwin x64
yarn : 1.22.11

nx : 12.9.0
@nrwl/angular : Not Found
@nrwl/cli : 12.9.0
@nrwl/cypress : 12.9.0
@nrwl/devkit : 12.9.0
@nrwl/eslint-plugin-nx : 12.9.0
@nrwl/express : Not Found
@nrwl/jest : 12.9.0
@nrwl/linter : 12.9.0
@nrwl/nest : Not Found
@nrwl/next : Not Found
@nrwl/node : Not Found
@nrwl/nx-cloud : Not Found
@nrwl/react : 12.9.0
@nrwl/schematics : Not Found
@nrwl/tao : 12.9.0
@nrwl/web : 12.9.0
@nrwl/workspace : 12.9.0
@nrwl/storybook : 12.9.0
@nrwl/gatsby : Not Found
typescript : 4.3.5

Update 1

Looks like PostCSS Config does not reach the imported libs.

Update 2

Only on --prod that PostCSS don’t work libs.

Issue Analytics

State:
Created 2 years ago
Comments:13 (5 by maintainers)

Top GitHub Comments

1reaction

albert-medcheckcommented, Sep 17, 2021

Fyi, on this branch of my repo, it’s able to do what you observed it isn’t doing. I don’t know if this is recommended way of going about it or not since I haven’t received any feedback from an earlier post a few weeks ago.

Ah, I saw that you’ve added a postcss and tailwindconfig on the lib itself. I actually already tried that and it works on development nx serve but fails to on build. That’s why I removed it and open this issue.

0reactions

jaysoocommented, Oct 8, 2021

Will be part of Nx 13 in a couple of weeks.

Top Results From Across the Web

No PostCSS config found - webpack - Stack Overflow

Made a new file in the root directory named postcss.config.js and added. module.exports = {};. Found this on the following post:.

postcss/postcss - Gitter

It seems to be that postcss doesn't know how to import a file referenced in an @import in the scss files: @import('libs/theme/scss/brand-colors') for ......

Configuring Vite

Vite will replace __filename , __dirname , and import.meta.url in config files and ... is provided, Vite will not search for other PostCSS...

Styling - Remix

Tailwind CSS. Remote Stylesheets. PostCSS. CSS Preprocessors. CSS-in-JS libraries ... When the route is no longer active, the stylesheet is removed.

postcss-loader | webpack - JS.ORG

In the following configuration the plugin postcss-preset-env is used, which is not installed by default. file.js import css from "file.css";. webpack.config ...