agneym / preact-cli-tailwind Goto Github PK

View Code? Open in Web Editor NEW

32.0 5.0 4.0 266 KB

Preact CLI Plugin that helps add Tailwind CSS to your project

License: MIT License

JavaScript 89.47% Shell 10.53%

preact preact-cli preact-cli-plugin tailwind tailwindcss

preact-cli-tailwind's Introduction

Preact CLI Tailwind CSS Plugin

Adds Tailwind CSS to Preact CLI.

Tailwind is added as a PostCSS Plugin.

Usage

npm i preact-cli-tailwind tailwindcss --save-dev

# OR

yarn add preact-cli-tailwind tailwindcss --dev

In your preact.config.js:

const tailwind = require("preact-cli-tailwind");

module.exports = (config, env, helpers) => {
  config = tailwind(config, env, helpers);
  return config;
};

API

Pass in config, env and helpers as forwarded from config.

Contributing

PRs Welcome.

preact-cli-tailwind's People

Contributors

Stargazers

Watchers

Forkers

tim-hub matthewharwood marksalpeter filefabrik

preact-cli-tailwind's Issues

Error when code has CSS file imported in JS

Error message

✖ ERROR ./style/index.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 (./node_modules/postcss/lib/processor.js:153:15) Build failed!

Preact 10. Error: PostCSS plugin tailwindcss requires PostCSS 8.

When trying to use with preact 10 - doesn't work.
The error is:

Error: PostCSS plugin tailwindcss requires PostCSS 8.

Solution from Tailwind site doesn't help.

npm uninstall tailwindcss postcss autoprefixer
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Usage with typescript

The preact-template for typescript comes with a preact.config.js file. It's not clear on how to actually include the preact-cli-tailwind, i keep getting this error;

× ERROR ./assets/css/app.css
Module build failed (from ../node_modules/postcss-loader/src/index.js):
SyntaxError: Unexpected token (10:10)
    at _class.pp$4.raise (.\node_modules\acorn\dist\acorn.js:2927:15)
    at _class.pp.unexpected (.\node_modules\acorn\dist\acorn.js:698:10)
    at _class.pp.expect (.\node_modules\acorn\dist\acorn.js:692:28)
    at _class.pp$3.parseObj (.\node_modules\acorn\dist\acorn.js:2563:14)
    at _class.pp$3.parseExprAtom (.\node_modules\acorn\dist\acorn.js:2302:19)
    at _class.parseExprAtom (.\node_modules\acorn-node\lib\dynamic-import\index.js:77:117)
    at _class.pp$3.parseExprSubscripts (.\node_modules\acorn\dist\acorn.js:2129:21)
    at _class.pp$3.parseMaybeUnary (.\node_modules\acorn\dist\acorn.js:2106:19)
    at _class.parseMaybeUnary (.\node_modules\acorn-node\lib\private-class-elements\index.js:122:54)
    at _class.pp$3.parseExprOps (.\node_modules\acorn\dist\acorn.js:2041:21)
    at _class.pp$3.parseMaybeConditional (.\node_modules\acorn\dist\acorn.js:2024:21)
    at _class.pp$3.parseMaybeAssign (.\node_modules\acorn\dist\acorn.js:1997:21)
    at _class.pp$3.parsePropertyValue (.\node_modules\acorn\dist\acorn.js:2630:89)
    at _class.pp$3.parseProperty (.\node_modules\acorn\dist\acorn.js:2621:10)
    at _class.pp$3.parseObj (.\node_modules\acorn\dist\acorn.js:2567:23)
    at _class.pp$3.parseExprAtom (.\node_modules\acorn\dist\acorn.js:2302:19)
 @ ./assets/css/app.css 2:26-162 43:4-64:5 46:18-154
 @ ./components/app/index.tsx
 @ ./index.ts
 @ ../node_modules/preact-cli/lib/lib/entry.js
 @ multi ../node_modules/preact-cli/lib/lib/entry webpack-dev-server/client webpack/hot/dev-server

When I upgrade to preact-cli 3.2.* and preact-cli-tailwind 3, It can not support webp file load with url() function

Excuse me, I have a problem when upgrade version.

I add theme setting in tailwind.config.js like this:

module.exports = {
	theme:
		extend: {
			backgroundImage: _theme => ({
				profilebg: "url('/assets/images/sample/profile-bg/l_note1.webp')",
				d_profilebg: "url('/assets/images/sample/profile-bg/d_note2.webp')",
			}),
		}
	}
}

before upgrade preact-cli, it's work, and after it throw error:

✖ ERROR ./assets/images/sample/profile-bg/d_note2.webp 1:6
Module parse failed: Unexpected character '' (1:6)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
 @ ./style/index.css 11:0-92 19:73-102
 @ ./style/index.css
 @ ./index.js
 @ ../node_modules/preact-cli/lib/lib/entry.js

jpg file is ok 😂

Tailwind CSS output not optimized

I have been trying to get Preact and Tailwind to work together using the README file. I have it working but when I run 'npm run build' it takes a minute or so to build. But the output CSS files are about 3MB in size.

My question is if this tool is designed to optimize the production build? Or this is what I get.

This is a new build created like this:

npx preact-cli create simple myproject
cd myproject
npm i tailwindcss
npm -D i preact-cli-tailwind

I also preact.config.js as described and imported tailwind into src/styles.css (Added: @tailwind base;@tailwind components;@tailwind utilities)

The versions running from package.json is:

  "devDependencies": {
    "eslint": "^7.17.0",
    "eslint-config-preact": "^1.1.3",
    "preact-cli": "^3.0.0",
    "preact-cli-tailwind": "^3.0.0",
    "sirv-cli": "^1.0.3",
    "tailwindcss": "^2.2.7"
  },
  "dependencies": {
    "preact": "^10.1.0",
    "preact-render-to-string": "^5.1.2"

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

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!

Putting tailwind classes on html elements in preact jsx doesn't render the class?

Hi guys,

Quick question.

Placing styles in the style.css file seems to work as shown below... however if I place tailwind classes in the jsx on an element the classes don't get applied?

you see below green doesn't get applied while placing the class directly in the jsx... Is this a bug, or was this by design?