I try to use bud.js in a custom wordpress plugin.
I successed build js, css. But when I try to use Tailwindcss, it dosen’t parse my php file …
Another strange things, the CSS file is correctly parsed, only if i remove tailwind import in my file … if I put @import, yarn dev loop endless…
I think i do somethong wrong, but I can’t figure out what is not working…
My CSS file project-app.css
/*
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
*/
h1 {
@apply text-blue underline mb-32 mt-10;
}
My bud.js.config
/**
* Build configuration for bud.js
* @param {import('@roots/bud').Bud} bud
*/
export default async (bud) => {
bud
.setPath("@src", "public/src")
.entry({
app: ["@src/project-app.js", "@src/project-app.css"],
})
.watch([bud.path("@src/**/*"), bud.path("public/**/*")])
.proxy("http://project.test")
.serve("http://project.test:3000")
.assets({
from: bud.path("@src/images"),
to: bud.path("@dist/images"),
})
};
My tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./*.php",
"./public/**/*.php",
"./includes/**/*.php",
"./admin/**/*.php",
],
theme: {
colors: {
blue: "#4b87c9",
'blue-light': "#abc7e9",
},
extend: {},
},
plugins: [],
};
My package.json
{
"devDependencies": {
"@roots/bud": "^6.12.0",
"@roots/bud-postcss": "^6.12.0",
"@roots/bud-tailwindcss": "^6.12.0",
"@roots/bud-wordpress-manifests": "^6.12.0",
"tailwindcss": "^3.3.1"
},
"name": "pharaon",
"description": "=== Plugin Name === Contributors: (this should be a list of wordpress.org userid's) Donate link: https://agm-multimedia.com Tags: comments, spam Requires at least: 3.0.1 Tested up to: 3.4 Stable tag: 4.3 License: GPLv2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html",
"version": "1.0.0",
"main": "tailwind.config.js",
"type": "module",
"dependencies": {
"@alpinejs/collapse": "^3.12.0",
"@alpinejs/focus": "^3.12.0",
"@roots/bud-babel": "^6.12.0",
"@roots/bud-entrypoints": "^6.12.0",
"@roots/wordpress-hmr": "^6.12.0",
"alpinejs": "^3.12.0",
"any-promise": "^1.3.0",
"anymatch": "^3.1.3",
"arg": "^5.0.2",
"autoprefixer": "^10.4.14",
"balanced-match": "^1.0.2",
"binary-extensions": "^2.2.0",
"brace-expansion": "^1.1.11",
"braces": "^3.0.2",
"camelcase-css": "^2.0.1",
"chokidar": "^3.5.3",
"color-name": "^1.1.4",
"commander": "^4.1.1",
"concat-map": "^0.0.1",
"cssesc": "^3.0.0",
"didyoumean": "^1.2.2",
"dlv": "^1.1.3",
"fast-glob": "^3.2.12",
"fastq": "^1.15.0",
"fill-range": "^7.0.1",
"fs.realpath": "^1.0.0",
"fsevents": "^2.3.2",
"function-bind": "^1.1.1",
"glob": "^7.1.6",
"glob-parent": "^6.0.2",
"has": "^1.0.3",
"inflight": "^1.0.6",
"inherits": "^2.0.4",
"is-binary-path": "^2.1.0",
"is-core-module": "^2.12.0",
"is-extglob": "^2.1.1",
"is-glob": "^4.0.3",
"is-number": "^7.0.0",
"jiti": "^1.18.2",
"lilconfig": "^2.1.0",
"lines-and-columns": "^1.2.4",
"merge2": "^1.4.1",
"micromatch": "^4.0.5",
"minimatch": "^3.1.2",
"mz": "^2.7.0",
"nanoid": "^3.3.6",
"normalize-path": "^3.0.0",
"object-assign": "^4.1.1",
"object-hash": "^3.0.0",
"once": "^1.4.0",
"path-is-absolute": "^1.0.1",
"path-parse": "^1.0.7",
"picocolors": "^1.0.0",
"picomatch": "^2.3.1",
"pify": "^2.3.0",
"pirates": "^4.0.5",
"postcss": "^8.4.22",
"postcss-import": "^14.1.0",
"postcss-js": "^4.0.1",
"postcss-load-config": "^3.1.4",
"postcss-nested": "^6.0.0",
"postcss-selector-parser": "^6.0.11",
"postcss-value-parser": "^4.2.0",
"queue-microtask": "^1.2.3",
"quick-lru": "^5.1.1",
"read-cache": "^1.0.0",
"readdirp": "^3.6.0",
"resolve": "^1.22.3",
"reusify": "^1.0.4",
"run-parallel": "^1.2.0",
"source-map-js": "^1.0.2",
"sucrase": "^3.32.0",
"supports-preserve-symlinks-flag": "^1.0.0",
"thenify": "^3.3.1",
"thenify-all": "^1.6.0",
"to-regex-range": "^5.0.1",
"ts-interface-checker": "^0.1.13",
"util-deprecate": "^1.0.2",
"wrappy": "^1.0.2",
"yaml": "^1.10.2"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "bud dev",
"build": "bud build"
},
"keywords": [],
"author": "",
"license": "ISC",
"volta": {
"node": "18.16.0",
"yarn": "1.22.19"
}
}
Thanks !