search

agneym / preact-cli-tailwind

Preact CLI Plugin that helps add Tailwind CSS to your project
MIT License
32 stars 4 forks source link

Does not work out-of-the box with preact 3.0.5 #7

Closed Semmu closed 3 years ago

Semmu commented 3 years ago

Hi there,

I just tried this plugin on a fresh Preact project using the default template and it does not work. Error message is about PostCSS 8 not being supported.

✖ ERROR ./routes/profile/style.css
Module build failed (from ../node_modules/postcss-loader/src/index.js):
Error: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
    at Processor.normalize (./routes/profile/index.js
 @ ./routes/profile/index.js
 @ ./components/app.js
 @ ./index.js
 @ ../node_modules/preact-cli/lib/lib/entry.js

package.json for reference:

{
  "private": true,
  "name": "frontend",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "build": "preact build",
    "serve": "sirv build --port 8080 --cors --single",
    "dev": "preact watch",
    "lint": "eslint src",
    "test": "jest"
  },
  "eslintConfig": {
    "extends": "preact",
    "ignorePatterns": [
      "build/"
    ]
  },
  "devDependencies": {
    "enzyme": "^3.10.0",
    "enzyme-adapter-preact-pure": "^2.0.0",
    "eslint": "^6.0.1",
    "eslint-config-preact": "^1.1.0",
    "jest": "^24.9.0",
    "jest-preset-preact": "^1.0.0",
    "postcss": "^8.2.4",
    "preact-cli": "^3.0.0",
    "preact-cli-tailwind": "^2.0.1",
    "sirv-cli": "1.0.3",
    "tailwindcss": "^2.0.2"
  },
  "dependencies": {
    "preact": "^10.3.2",
    "preact-render-to-string": "^5.1.4",
    "preact-router": "^3.2.1"
  },
  "jest": {
    "preset": "jest-preset-preact",
    "setupFiles": [
      "<rootDir>/tests/__mocks__/browserMocks.js",
      "<rootDir>/tests/__mocks__/setupTests.js"
    ]
  }
}

As I'm pretty stupid regarding frontend stuff, could you please take a look and fix it?

Thanks in advance!

Semmu commented 3 years ago

I may have been too fast posting this here, because according to this note in the documentation the issue I guess is not related to this project, but Preact itself.

agneym commented 3 years ago

preact-cil currently uses PostCSS 7 (pinned with autoprefixer version). Unfortunately we cannot workaround that without running a parallel postcss pipeline. But you can use the workaround in tailwind docs as you mentioned.

silence717 commented 2 years ago

I use it like this preact-typescript-tailwind-seed