CSS styles not being applied - set `inject: true` for rollup-plugin-postcss

[gmencz]

Current Behavior

Tailwind CSS styles not being applied.

Additional context

I'm not sure this is a bug, I think I'm missing something in my config but I don't know what, here's my tsdx.config.js:

const postcss = require('rollup-plugin-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const tailwindcss = require('tailwindcss');

module.exports = {
  rollup(config, options) {
    config.plugins.push(
      postcss({
        plugins: [
          autoprefixer(),
          tailwindcss(),
          cssnano({
            preset: 'default',
          }),
        ],
        inject: false,
        // only write out CSS for the first bundle (avoids pointless extra files):
        extract: !!options.writeMeta,
      })
    );
    return config;
  },
};

Your environment

System:
    OS: Linux 4.19 Ubuntu 20.04.1 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-7700K CPU @ 4.20GHz
    Memory: 4.13 GB / 12.44 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
Binaries:
  Node: 14.13.1 - ~/.nvm/versions/node/v14.13.1/bin/node
  npm: 6.14.11 - ~/.nvm/versions/node/v14.13.1/bin/npm
npmPackages:
  typescript: ^3.4.5 => 3.9.7

[agilgur5]

Tailwind CSS styles not being applied.

You'll have to be a lot more specific by what you mean by "not applied".

Your rollup-plugin-postcss configuration has inject: false and extract: true, meaning it outputs a CSS file. The consumers of your library then have to import the CSS file to get those styles. It's difficult to tell given the lack of detail here, but I assume you may want the opposite. In which case this would largely be a duplicate of https://github.com/formium/tsdx/discussions/947#discussioncomment-224566. If so, this isn't a bug and isn't TSDX specific nor Tailwind specific, and is just support with configuring rollup-plugin-postcss.

Your environment

It seems like you may not have ran this in the correct directory as your TSDX version is not specified here (and potentially other issues)

[gmencz]

Got it, inject: false was the issue, setting it to true fixed it, thanks for the help.