apostrophecms / apostrophecms/apostrophe
Tailwind plugins not working?
- Dominant language
- JavaScript
- Stars
- 4.6k
- Forks
- 650
- Avg merge
- 19h 21m
- Merged PRs (30d)
- 23
Description
## 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`
3. Go into the `tailwind.config.js`
4. add a plugin
4.1 via npm
```javascript
const plugin = require("tailwindcss/plugin");
module.exports = {
content: ["./views/**/*.{html,js}", "./modules/**/*.{html,js}"],
presets: [],
plugins: [
require('@tailwindcss/typography'),
]
...
};
```
4.2 or manually
```javascript
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
```javascript
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.
Contributor guide
Research direction
Start by reviewing postcss.config.js and tailwind.config.js, including the npm plugin and manual plugin configurations described in the reproduction steps. Run APOS_DEV=1 npm run dev and inspect /apos-frontend/default/apos-bundle.css for i-am-a-class. Done means the plugin-generated class appears in the bundled CSS.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, node.js, tailwindcss
- Domain
- build-system, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100