apostrophecms / apostrophecms/apostrophe

Tailwind plugins not working?

Open
#3,914 5 comments 0 reactions 0 assignees View on GitHub
bug
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.