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" } });
     }),
   ],
   ...
   };  

4. 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" } });
     }),
   ],
   ...
   };

5. Run APOS_DEV=1 npm run dev
6. Open http://localhost:3000/apos-frontend/default/apos-bundle.css
7. 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.