Tailwind plugins not working?

[waldemar-p]

To Reproduce

Step by step instructions to reproduce the behavior:

1. Install Tailwind the usual way (don't forget postcss.config.js and include tailwindcss there) and init to have tailwind.config.js 2.1 npm i -D tailwindcss && npx tailwindcss init --postcss
2. Go into the tailwind.config.js
3. add a plugin 4.1 via npm

  const plugin = require("tailwindcss/plugin");
  
  module.exports = {
    content: ["./views/**/*.{html,js}", "./modules/**/*.{html,js}"],
    presets: [],
    plugins: [
      require('@tailwindcss/typography'),
    ]
    ...
  };

4.2 or manually

  const plugin = require("tailwindcss/plugin");
  
  module.exports = {
    content: ["./views/**/*.{html,js}", "./modules/**/*.{html,js}"],
    presets: [],
    plugins: [
      plugin(function ({ addComponents }) {
        addComponents({ ".i-am-a-class": { color: "black" } });
      }),
    ],
    ...
  };  

5. To be safe, add class(es) to safelist via

  const plugin = require("tailwindcss/plugin");
  
  module.exports = {
    content: ["./views/**/*.{html,js}", "./modules/**/*.{html,js}"],
    presets: [],
    safelist: [
      'i-am-a-class'
    ],
    plugins: [
      plugin(function ({ addComponents }) {
        addComponents({ ".i-am-a-class": { color: "black" } });
      }),
    ],
    ...
  };

6. Run APOS_DEV=1 npm run dev
7. Open http://localhost:3000/apos-frontend/default/apos-bundle.css
8. Search for a class, for example i-am-a-class

Expected behavior

The class i-am-a-class to be present in the bundled CSS file.

Describe the bug

The class i-am-a-class is missing from the bundled CSS file.

Details

Version of Node.js: 14.18.0

Server Operating System: I am running this on my dev laptop with MacOS Monitery 12.6.

[BoDonkey]

Howdy, I wasn't able to reproduce the bug. Are you including @tailwind components; in your module /ui/src/index.scss file? Cheers

[waldemar-p]

Hello,

Yes, I am including them.

So after following my steps the desired class is added to the bundle? Now I am confused.

[BoDonkey]

Sorry, not sure. But I'm glad it is working! I'm going to close this issue. Reach out if you have any other problem.

[waldemar-p]

Sorry, I think we misunderstood each other. I thought it was working for you and was confused because it is not for me. 😅

[boutell]

@waldemar-p I think this will move faster if you can share a simple project based on our a3-boilerplate that demonstrates the issue.