Preact CLI Plugin that helps add Tailwind CSS to your project

By Agney Menon
Last update: Oct 31, 2022
Comments: 11

Preact CLI Tailwind CSS Plugin

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.

Github

https://github.com/agneym/preact-cli-tailwind

Comments(11)

1

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?

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!

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 😂

4

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 [email protected]:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat [email protected]^7 [email protected]^9
5

Tailwind CSS output not optimized
Hi

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"
```
6

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!
7

Update Readme to support Extra information on install tailwindcss

There have been some updates to preact-cli; moreover, your readme doesn't say that you need to install tailwindcss. Might sound obvious but it stumped me for 20 mins.
8

Bump minimist from 1.2.5 to 1.2.6
Bumps minimist from 1.2.5 to 1.2.6.
Commits
- 7efb22a 1.2.6
- ef88b93 security notice for additional prototype pollution issue
- c2b9819 isConstructorOrProto adapted from PR
- bc8ecee test from prototype pollution PR
- See full diff in compare view
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:
- @dependabot rebase will rebase this PR
- @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
- @dependabot merge will merge this PR after your CI passes on it
- @dependabot squash and merge will squash and merge this PR after your CI passes on it
- @dependabot cancel merge will cancel a previously requested merge and block automerging
- @dependabot reopen will reopen this PR if it is closed
- @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
- @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
- @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
- @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
- @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
- @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
You can disable automated security fix PRs for this repo from the Security Alerts page.
9

Bump hosted-git-info from 2.8.5 to 2.8.9
Bumps hosted-git-info from 2.8.5 to 2.8.9.
Changelog

Sourced from hosted-git-info's changelog.
2.8.9 (2021-04-07)

Bug Fixes
- backport regex fix from #76 (29adfe5), closes #84
2.8.8 (2020-02-29)

Bug Fixes
- #61 & #65 addressing issues w/ url.URL implmentation which regressed node 6 support (5038b18), closes #66
2.8.7 (2020-02-26)

Bug Fixes
- Do not attempt to use url.URL when unavailable (2d0bb66), closes #61 #62
- Do not pass scp-style URLs to the WhatWG url.URL (f2cdfcf), closes #60
2.8.6 (2020-02-25)
Commits
- 8d4b369 chore(release): 2.8.9
- 29adfe5 fix: backport regex fix from #76
- afeaefd chore(release): 2.8.8
- 5038b18 fix: #61 & #65 addressing issues w/ url.URL implmentation which regressed nod...
- 7440afa chore(release): 2.8.7
- 2d0bb66 fix: Do not attempt to use url.URL when unavailable
- f2cdfcf fix: Do not pass scp-style URLs to the WhatWG url.URL
- e1b83df chore(release): 2.8.6
- ff259a6 Ensure passwords in hosted Git URLs are correctly escaped
- See full diff in compare view
Maintainer changes

This version was pushed to npm by nlf, a new releaser for hosted-git-info since your current version.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:
- @dependabot rebase will rebase this PR
- @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
- @dependabot merge will merge this PR after your CI passes on it
- @dependabot squash and merge will squash and merge this PR after your CI passes on it
- @dependabot cancel merge will cancel a previously requested merge and block automerging
- @dependabot reopen will reopen this PR if it is closed
- @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
- @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
- @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
- @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
- @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
- @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
You can disable automated security fix PRs for this repo from the Security Alerts page.
10

Bump lodash from 4.17.19 to 4.17.21
Bumps lodash from 4.17.19 to 4.17.21.
Commits
- f299b52 Bump to v4.17.21
- c4847eb Improve performance of toNumber, trim and trimEnd on large input strings
- 3469357 Prevent command injection through _.template's variable option
- ded9bc6 Bump to v4.17.20.
- 63150ef Documentation fixes.
- 00f0f62 test.js: Remove trailing comma.
- 846e434 Temporarily use a custom fork of lodash-cli.
- 5d046f3 Re-enable Travis tests on 4.17 branch.
- aa816b3 Remove /npm-package.
- See full diff in compare view
Maintainer changes

This version was pushed to npm by bnjmnt4n, a new releaser for lodash since your current version.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:
- @dependabot rebase will rebase this PR
- @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
- @dependabot merge will merge this PR after your CI passes on it
- @dependabot squash and merge will squash and merge this PR after your CI passes on it
- @dependabot cancel merge will cancel a previously requested merge and block automerging
- @dependabot reopen will reopen this PR if it is closed
- @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
- @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
- @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
- @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
- @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
- @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
You can disable automated security fix PRs for this repo from the Security Alerts page.
11

Bump ini from 1.3.5 to 1.3.8
Bumps ini from 1.3.5 to 1.3.8.
Commits
- a2c5da8 1.3.8
- af5c6bb Do not use Object.create(null)
- 8b648a1 don't test where our devdeps don't even work
- c74c8af 1.3.7
- 024b8b5 update deps, add linting
- 032fbaf Use Object.create(null) to avoid default object property hazards
- 2da9039 1.3.6
- cfea636 better git push script, before publish instead of after
- 56d2805 do not allow invalid hazardous string as section name
- See full diff in compare view
Maintainer changes

This version was pushed to npm by isaacs, a new releaser for ini since your current version.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:
- @dependabot rebase will rebase this PR
- @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
- @dependabot merge will merge this PR after your CI passes on it
- @dependabot squash and merge will squash and merge this PR after your CI passes on it
- @dependabot cancel merge will cancel a previously requested merge and block automerging
- @dependabot reopen will reopen this PR if it is closed
- @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
- @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
- @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
- @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
- @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
- @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
You can disable automated security fix PRs for this repo from the Security Alerts page.

Preact CLI Plugin that helps add Tailwind CSS to your project

Preact CLI Tailwind CSS Plugin

Usage

API

Contributing

Github

Comments(11)

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

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

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

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

Tailwind CSS output not optimized

Error when code has CSS file imported in JS

Error message

Update Readme to support Extra information on install tailwindcss

Bump minimist from 1.2.5 to 1.2.6

Bump hosted-git-info from 2.8.5 to 2.8.9

2.8.9 (2021-04-07)

Bug Fixes

2.8.8 (2020-02-29)

Bug Fixes

2.8.7 (2020-02-26)

Bug Fixes

2.8.6 (2020-02-25)

Bump lodash from 4.17.19 to 4.17.21

Bump ini from 1.3.5 to 1.3.8

Popular Tag

Related