From f83e0c25481fc812784f7df61c99c2eabffb27fb Mon Sep 17 00:00:00 2001 From: nani-samireddy Date: Mon, 20 Jan 2025 15:12:03 +0530 Subject: [PATCH 1/7] Add optional tailwindCSS support for theme --- bin/init.js | 78 ++++++++ inc/classes/class-assets.php | 15 ++ package-lock.json | 347 ++++++++++++++++++++++++++++++++++- package.json | 3 + 4 files changed, 436 insertions(+), 7 deletions(-) diff --git a/bin/init.js b/bin/init.js index e3bbcf8a..31e81395 100755 --- a/bin/init.js +++ b/bin/init.js @@ -60,6 +60,16 @@ if ( 0 === args.length ) { rl.question( 'Enter theme name (shown in WordPress admin)*: ', ( themeName ) => { + rl.question( 'Would you like to add TailwindCSS support? (y/n) ', ( answer ) => { + + if ( 'y' === answer.toLowerCase() ) { + + tailwindcssSetup(); + } + + rl.close(); + } ); + const themeInfo = renderThemeDetails( themeName ); rl.question( 'Confirm the Theme Details (y/n) ', ( confirm ) => { @@ -93,6 +103,74 @@ rl.on( 'close', () => { process.exit( 0 ); } ); +/** + * Setup the TailwindCSS files. + */ +const tailwindcssSetup = () => { + + const tailwindFiles = [ + { + path: path.resolve( getRoot(), 'tailwind.config.js' ), + content: `/** @type {import('tailwindcss').Config} */ +module.exports = { +content: [ + // Ensure changes to PHP, html files and theme.json trigger a rebuild. + './**/*.{php,html}', + './theme.json', + ], +theme: { + extend: {}, +}, +plugins: [], +} +`, + }, + { + path: path.resolve( getRoot(), 'postcss.config.js' ), + content: `module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; +`, + }, + { + path: path.resolve( getRoot(), 'assets/src/css/tailwind.scss' ), + content: `/** +* This injects Tailwind's base styles. +*/ +@import "tailwindcss/base"; + +/** + * This injects Tailwind's component classes. + */ +@import "tailwindcss/components"; + +/** + * This injects Tailwind's utility classes. + */ +@import "tailwindcss/utilities"; +`, + } + ]; + + tailwindFiles.forEach( ( file ) => { + createFile( file.path, file.content ); + } ); + + console.log( info.success( '\nTailwindCSS setup completed!' ), '✨' ); +}; + +/** + * Creates a file with the given content. + * @param {string} filePath Path to the file. + * @param {string} content Content to write to the file. + */ +const createFile = ( filePath, content ) => { + fs.writeFileSync( filePath, content ); +}; + /** * Update composer.json file. * diff --git a/inc/classes/class-assets.php b/inc/classes/class-assets.php index 18bca005..21699f94 100644 --- a/inc/classes/class-assets.php +++ b/inc/classes/class-assets.php @@ -18,12 +18,17 @@ class Assets { use Singleton; + private $is_tailwindcss_enabled = false; + /** * Constructor. */ protected function __construct() { // Setup hooks. $this->setup_hooks(); + + // Check if the TailwindCSS config file exists. + $this->is_tailwindcss_enabled = file_exists( untrailingslashit( get_template_directory() ) . '/tailwind.config.js' ); } /** @@ -49,6 +54,11 @@ public function register_assets() { $this->register_script( 'core-navigation', 'js/core-navigation.js' ); $this->register_style( 'core-navigation', 'css/core-navigation.css' ); $this->register_style( 'elementary-theme-styles', 'css/styles.css' ); + + // Register tailwindcss only if it is enabled. + if ( $this->is_tailwindcss_enabled ) { + $this->register_style( 'elementary-theme-tailwind', 'css/tailwind.css' ); + } } /** @@ -168,5 +178,10 @@ public function get_file_version( $file, $ver = false ) { */ public function enqueue_assets() { wp_enqueue_style( 'elementary-theme-styles' ); + + // Enqueue tailwindcss only if it is enabled. + if ( $this->is_tailwindcss_enabled ) { + wp_enqueue_style( 'elementary-theme-tailwind' ); + } } } diff --git a/package-lock.json b/package-lock.json index 9bdf8c94..6ee0fabe 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "@wordpress/eslint-plugin": "22.1.1", "@wordpress/jest-preset-default": "12.15.1", "@wordpress/scripts": "30.8.1", + "autoprefixer": "10.4.20", "browserslist": "4.24.3", "cross-env": "7.0.3", "css-minimizer-webpack-plugin": "7.0.0", @@ -26,9 +27,23 @@ "jest-silent-reporter": "0.6.0", "lint-staged": "15.3.0", "npm-run-all": "4.1.5", + "postcss": "8.5.1", + "tailwindcss": "3.4.17", "webpack-remove-empty-scripts": "1.0.4" } }, + "node_modules/@alloc/quick-lru": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz", + "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/@ampproject/remapping": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz", @@ -6366,6 +6381,12 @@ "url": "https://patreon.com/biodiscus" } }, + "node_modules/any-promise": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz", + "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==", + "dev": true + }, "node_modules/anymatch": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", @@ -6388,6 +6409,12 @@ "node": ">=14" } }, + "node_modules/arg": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz", + "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==", + "dev": true + }, "node_modules/argparse": { "version": "1.0.10", "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", @@ -7318,6 +7345,15 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/camelcase-css": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz", + "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==", + "dev": true, + "engines": { + "node": ">= 6" + } + }, "node_modules/camelcase-keys": { "version": "6.2.2", "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-6.2.2.tgz", @@ -9689,6 +9725,12 @@ "integrity": "sha512-DPnhUXvmvKT2dFA/j7B+riVLUt9Q6RKJlcppojL5CoRywJJKLDYnRlw0gTFKfgDPHP5E04UoB71SxoJlVZy8FA==", "dev": true }, + "node_modules/didyoumean": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz", + "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==", + "dev": true + }, "node_modules/diff-sequences": { "version": "29.6.3", "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.6.3.tgz", @@ -9710,6 +9752,12 @@ "node": ">=8" } }, + "node_modules/dlv": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz", + "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==", + "dev": true + }, "node_modules/dns-packet": { "version": "5.6.1", "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-5.6.1.tgz", @@ -15435,6 +15483,15 @@ "url": "https://github.com/chalk/supports-color?sponsor=1" } }, + "node_modules/jiti": { + "version": "1.21.7", + "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz", + "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==", + "dev": true, + "bin": { + "jiti": "bin/jiti.js" + } + }, "node_modules/joi": { "version": "17.13.3", "resolved": "https://registry.npmjs.org/joi/-/joi-17.13.3.tgz", @@ -17086,10 +17143,21 @@ "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==", "dev": true }, + "node_modules/mz": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz", + "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==", + "dev": true, + "dependencies": { + "any-promise": "^1.0.0", + "object-assign": "^4.0.1", + "thenify-all": "^1.0.0" + } + }, "node_modules/nanoid": { - "version": "3.3.7", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", - "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", + "version": "3.3.8", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz", + "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==", "dev": true, "funding": [ { @@ -17582,6 +17650,15 @@ "integrity": "sha512-NahvP2vZcy1ZiiYah30CEPw0FpDcSkSePJBMpzl5EQgCmISijiGuJm3SPYp7U+Lf2TljyaIw3E5EgkEx/TNEVA==", "dev": true }, + "node_modules/object-hash": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz", + "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==", + "dev": true, + "engines": { + "node": ">= 6" + } + }, "node_modules/object-inspect": { "version": "1.13.2", "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz", @@ -18461,9 +18538,9 @@ } }, "node_modules/postcss": { - "version": "8.4.49", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz", - "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==", + "version": "8.5.1", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.1.tgz", + "integrity": "sha512-6oz2beyjc5VMn/KV1pPw8fliQkhBXrVn1Z3TVyqZxU8kZpzEKhBdmCFqI6ZbmGtamQvQGuU1sgPTk8ZrXDD7jQ==", "dev": true, "funding": [ { @@ -18480,7 +18557,7 @@ } ], "dependencies": { - "nanoid": "^3.3.7", + "nanoid": "^3.3.8", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" }, @@ -18586,6 +18663,89 @@ "postcss": "^8.4.31" } }, + "node_modules/postcss-import": { + "version": "15.1.0", + "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz", + "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==", + "dev": true, + "dependencies": { + "postcss-value-parser": "^4.0.0", + "read-cache": "^1.0.0", + "resolve": "^1.1.7" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "postcss": "^8.0.0" + } + }, + "node_modules/postcss-js": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz", + "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==", + "dev": true, + "dependencies": { + "camelcase-css": "^2.0.1" + }, + "engines": { + "node": "^12 || ^14 || >= 16" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + "peerDependencies": { + "postcss": "^8.4.21" + } + }, + "node_modules/postcss-load-config": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz", + "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "dependencies": { + "lilconfig": "^3.0.0", + "yaml": "^2.3.4" + }, + "engines": { + "node": ">= 14" + }, + "peerDependencies": { + "postcss": ">=8.0.9", + "ts-node": ">=9.0.0" + }, + "peerDependenciesMeta": { + "postcss": { + "optional": true + }, + "ts-node": { + "optional": true + } + } + }, + "node_modules/postcss-load-config/node_modules/yaml": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.7.0.tgz", + "integrity": "sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==", + "dev": true, + "bin": { + "yaml": "bin.mjs" + }, + "engines": { + "node": ">= 14" + } + }, "node_modules/postcss-loader": { "version": "6.2.1", "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-6.2.1.tgz", @@ -18783,6 +18943,31 @@ "postcss": "^8.1.0" } }, + "node_modules/postcss-nested": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz", + "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "dependencies": { + "postcss-selector-parser": "^6.1.1" + }, + "engines": { + "node": ">=12.0" + }, + "peerDependencies": { + "postcss": "^8.2.14" + } + }, "node_modules/postcss-normalize-charset": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-6.0.2.tgz", @@ -19476,6 +19661,24 @@ "node": ">=0.10.0" } }, + "node_modules/read-cache": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", + "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==", + "dev": true, + "dependencies": { + "pify": "^2.3.0" + } + }, + "node_modules/read-cache/node_modules/pify": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/read-pkg": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz", @@ -21747,6 +21950,72 @@ "node": "^14.17.0 || ^16.13.0 || >=18.0.0" } }, + "node_modules/sucrase": { + "version": "3.35.0", + "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz", + "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==", + "dev": true, + "dependencies": { + "@jridgewell/gen-mapping": "^0.3.2", + "commander": "^4.0.0", + "glob": "^10.3.10", + "lines-and-columns": "^1.1.6", + "mz": "^2.7.0", + "pirates": "^4.0.1", + "ts-interface-checker": "^0.1.9" + }, + "bin": { + "sucrase": "bin/sucrase", + "sucrase-node": "bin/sucrase-node" + }, + "engines": { + "node": ">=16 || 14 >=14.17" + } + }, + "node_modules/sucrase/node_modules/commander": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz", + "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==", + "dev": true, + "engines": { + "node": ">= 6" + } + }, + "node_modules/sucrase/node_modules/glob": { + "version": "10.4.5", + "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz", + "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==", + "dev": true, + "dependencies": { + "foreground-child": "^3.1.0", + "jackspeak": "^3.1.2", + "minimatch": "^9.0.4", + "minipass": "^7.1.2", + "package-json-from-dist": "^1.0.0", + "path-scurry": "^1.11.1" + }, + "bin": { + "glob": "dist/esm/bin.mjs" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/sucrase/node_modules/minimatch": { + "version": "9.0.5", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz", + "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==", + "dev": true, + "dependencies": { + "brace-expansion": "^2.0.1" + }, + "engines": { + "node": ">=16 || 14 >=14.17" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", @@ -21970,6 +22239,43 @@ "url": "https://github.com/chalk/slice-ansi?sponsor=1" } }, + "node_modules/tailwindcss": { + "version": "3.4.17", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz", + "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==", + "dev": true, + "dependencies": { + "@alloc/quick-lru": "^5.2.0", + "arg": "^5.0.2", + "chokidar": "^3.6.0", + "didyoumean": "^1.2.2", + "dlv": "^1.1.3", + "fast-glob": "^3.3.2", + "glob-parent": "^6.0.2", + "is-glob": "^4.0.3", + "jiti": "^1.21.6", + "lilconfig": "^3.1.3", + "micromatch": "^4.0.8", + "normalize-path": "^3.0.0", + "object-hash": "^3.0.0", + "picocolors": "^1.1.1", + "postcss": "^8.4.47", + "postcss-import": "^15.1.0", + "postcss-js": "^4.0.1", + "postcss-load-config": "^4.0.2", + "postcss-nested": "^6.2.0", + "postcss-selector-parser": "^6.1.2", + "resolve": "^1.22.8", + "sucrase": "^3.35.0" + }, + "bin": { + "tailwind": "lib/cli.js", + "tailwindcss": "lib/cli.js" + }, + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/tapable": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz", @@ -22204,6 +22510,27 @@ "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==", "dev": true }, + "node_modules/thenify": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz", + "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==", + "dev": true, + "dependencies": { + "any-promise": "^1.0.0" + } + }, + "node_modules/thenify-all": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz", + "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==", + "dev": true, + "dependencies": { + "thenify": ">= 3.1.0 < 4" + }, + "engines": { + "node": ">=0.8" + } + }, "node_modules/third-party-web": { "version": "0.26.2", "resolved": "https://registry.npmjs.org/third-party-web/-/third-party-web-0.26.2.tgz", @@ -22354,6 +22681,12 @@ "typescript": ">=4.2.0" } }, + "node_modules/ts-interface-checker": { + "version": "0.1.13", + "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz", + "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==", + "dev": true + }, "node_modules/tsconfig-paths": { "version": "3.15.0", "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz", diff --git a/package.json b/package.json index 70fd60a3..cd670016 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "@wordpress/eslint-plugin": "22.1.1", "@wordpress/jest-preset-default": "12.15.1", "@wordpress/scripts": "30.8.1", + "autoprefixer": "10.4.20", "browserslist": "4.24.3", "cross-env": "7.0.3", "css-minimizer-webpack-plugin": "7.0.0", @@ -36,6 +37,8 @@ "jest-silent-reporter": "0.6.0", "lint-staged": "15.3.0", "npm-run-all": "4.1.5", + "postcss": "8.5.1", + "tailwindcss": "3.4.17", "webpack-remove-empty-scripts": "1.0.4" }, "scripts": { From 41162bfa95a20e199b3b03840a35844f33bff752 Mon Sep 17 00:00:00 2001 From: nani-samireddy Date: Mon, 20 Jan 2025 18:58:32 +0530 Subject: [PATCH 2/7] Add tailwind setup template files --- bin/init.js | 100 +++----- bin/templates/tailwindcss/postcss.config.js | 6 + bin/templates/tailwindcss/tailwind.config.js | 12 + bin/templates/tailwindcss/tailwind.scss | 14 ++ package-lock.json | 243 ------------------- package.json | 3 - 6 files changed, 69 insertions(+), 309 deletions(-) create mode 100644 bin/templates/tailwindcss/postcss.config.js create mode 100644 bin/templates/tailwindcss/tailwind.config.js create mode 100644 bin/templates/tailwindcss/tailwind.scss diff --git a/bin/init.js b/bin/init.js index 31e81395..96d51188 100755 --- a/bin/init.js +++ b/bin/init.js @@ -41,7 +41,7 @@ const info = { */ const getRoot = () => { return path.resolve( __dirname, '../' ); -} +}; let fileContentUpdated = false; let fileNameUpdated = false; @@ -60,35 +60,34 @@ if ( 0 === args.length ) { rl.question( 'Enter theme name (shown in WordPress admin)*: ', ( themeName ) => { - rl.question( 'Would you like to add TailwindCSS support? (y/n) ', ( answer ) => { + rl.question( 'Would you like to add TailwindCSS support? (y/n) ', ( tailwindAnswer ) => { - if ( 'y' === answer.toLowerCase() ) { + if ( 'y' === tailwindAnswer.toLowerCase() ) { tailwindcssSetup(); } - rl.close(); - } ); - - const themeInfo = renderThemeDetails( themeName ); - - rl.question( 'Confirm the Theme Details (y/n) ', ( confirm ) => { - - if ( 'n' === confirm.toLowerCase() ) { - console.log( info.warning( '\nTheme Setup Cancelled.\n' ) ); - rl.close(); - } - - initTheme( themeInfo ); - - rl.question( 'Would you like to initialize git (Note: It will delete any `.git` folder already in current directory)? (y/n) ', async ( initialize ) => { - if ( 'n' === initialize.toLowerCase() ) { - console.log( info.warning( '\nExiting without initializing GitHub.\n' ) ); - await askQuestionForHuskyInstallation(); - } else { - await initializeGit() + + const themeInfo = renderThemeDetails( themeName ); + + rl.question( 'Confirm the Theme Details (y/n) ', ( confirm ) => { + + if ( 'n' === confirm.toLowerCase() ) { + console.log( info.warning( '\nTheme Setup Cancelled.\n' ) ); + rl.close(); } - themeCleanupQuestion(); + + initTheme( themeInfo ); + + rl.question( 'Would you like to initialize git (Note: It will delete any `.git` folder already in current directory)? (y/n) ', async ( initialize ) => { + if ( 'n' === initialize.toLowerCase() ) { + console.log( info.warning( '\nExiting without initializing GitHub.\n' ) ); + await askQuestionForHuskyInstallation(); + } else { + await initializeGit() + } + themeCleanupQuestion(); + } ); } ); } ); } ); @@ -111,52 +110,25 @@ const tailwindcssSetup = () => { const tailwindFiles = [ { path: path.resolve( getRoot(), 'tailwind.config.js' ), - content: `/** @type {import('tailwindcss').Config} */ -module.exports = { -content: [ - // Ensure changes to PHP, html files and theme.json trigger a rebuild. - './**/*.{php,html}', - './theme.json', - ], -theme: { - extend: {}, -}, -plugins: [], -} -`, + source: path.resolve( getRoot(), 'bin/templates/tailwindcss/tailwind.config.js' ), }, { path: path.resolve( getRoot(), 'postcss.config.js' ), - content: `module.exports = { - plugins: { - tailwindcss: {}, - autoprefixer: {}, - }, -}; -`, + source: path.resolve( getRoot(), 'bin/templates/tailwindcss/postcss.config.js' ), }, { path: path.resolve( getRoot(), 'assets/src/css/tailwind.scss' ), - content: `/** -* This injects Tailwind's base styles. -*/ -@import "tailwindcss/base"; - -/** - * This injects Tailwind's component classes. - */ -@import "tailwindcss/components"; - -/** - * This injects Tailwind's utility classes. - */ -@import "tailwindcss/utilities"; -`, + source: path.resolve( getRoot(), 'bin/templates/tailwindcss/tailwind.scss' ), } ]; + + // Install the required packages and create the necessary files. + console.log( info.success( '\nInstalling TailwindCSS and its dependencies...' ) ); + execSync( 'npm install tailwindcss postcss autoprefixer --save-dev' ); + execSync( 'npx tailwindcss init -p' ); tailwindFiles.forEach( ( file ) => { - createFile( file.path, file.content ); + copyFileContents( file.path, file.source ); } ); console.log( info.success( '\nTailwindCSS setup completed!' ), '✨' ); @@ -165,10 +137,11 @@ plugins: [], /** * Creates a file with the given content. * @param {string} filePath Path to the file. - * @param {string} content Content to write to the file. + * @param {string} source Path to the source file. */ -const createFile = ( filePath, content ) => { - fs.writeFileSync( filePath, content ); +const copyFileContents = ( filePath, source ) => { + // copy the file contents. + fs.copyFileSync( source, filePath ); }; /** @@ -665,6 +638,7 @@ const generateThemeInfo = ( themeName ) => { const runThemeCleanup = () => { const deleteDirs = [ '.github', + 'bin/templates', 'bin/init.js', 'languages', ]; diff --git a/bin/templates/tailwindcss/postcss.config.js b/bin/templates/tailwindcss/postcss.config.js new file mode 100644 index 00000000..e873f1a4 --- /dev/null +++ b/bin/templates/tailwindcss/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; diff --git a/bin/templates/tailwindcss/tailwind.config.js b/bin/templates/tailwindcss/tailwind.config.js new file mode 100644 index 00000000..bbc59e83 --- /dev/null +++ b/bin/templates/tailwindcss/tailwind.config.js @@ -0,0 +1,12 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: [ + // Ensure changes to PHP, html files and theme.json trigger a rebuild. + './**/*.{php,html}', + './theme.json', + ], + theme: { + extend: {}, + }, + plugins: [], +} diff --git a/bin/templates/tailwindcss/tailwind.scss b/bin/templates/tailwindcss/tailwind.scss new file mode 100644 index 00000000..fd365902 --- /dev/null +++ b/bin/templates/tailwindcss/tailwind.scss @@ -0,0 +1,14 @@ +/** +* This injects Tailwind's base styles. +*/ +@import "tailwindcss/base"; + +/** + * This injects Tailwind's component classes. + */ +@import "tailwindcss/components"; + +/** + * This injects Tailwind's utility classes. + */ +@import "tailwindcss/utilities"; diff --git a/package-lock.json b/package-lock.json index 6ee0fabe..6d866071 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,7 +16,6 @@ "@wordpress/eslint-plugin": "22.1.1", "@wordpress/jest-preset-default": "12.15.1", "@wordpress/scripts": "30.8.1", - "autoprefixer": "10.4.20", "browserslist": "4.24.3", "cross-env": "7.0.3", "css-minimizer-webpack-plugin": "7.0.0", @@ -27,8 +26,6 @@ "jest-silent-reporter": "0.6.0", "lint-staged": "15.3.0", "npm-run-all": "4.1.5", - "postcss": "8.5.1", - "tailwindcss": "3.4.17", "webpack-remove-empty-scripts": "1.0.4" } }, @@ -3476,26 +3473,6 @@ "@parcel/watcher-win32-x64": "2.5.0" } }, - "node_modules/@parcel/watcher-android-arm64": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.0.tgz", - "integrity": "sha512-qlX4eS28bUcQCdribHkg/herLe+0A9RyYC+mm2PXpncit8z5b3nSqGVzMNR3CmtAOgRutiZ02eIJJgP/b1iEFQ==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": ">= 10.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, "node_modules/@parcel/watcher-darwin-arm64": { "version": "2.5.0", "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.0.tgz", @@ -3516,226 +3493,6 @@ "url": "https://opencollective.com/parcel" } }, - "node_modules/@parcel/watcher-darwin-x64": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.0.tgz", - "integrity": "sha512-9rhlwd78saKf18fT869/poydQK8YqlU26TMiNg7AIu7eBp9adqbJZqmdFOsbZ5cnLp5XvRo9wcFmNHgHdWaGYA==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">= 10.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/@parcel/watcher-freebsd-x64": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.0.tgz", - "integrity": "sha512-syvfhZzyM8kErg3VF0xpV8dixJ+RzbUaaGaeb7uDuz0D3FK97/mZ5AJQ3XNnDsXX7KkFNtyQyFrXZzQIcN49Tw==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "freebsd" - ], - "engines": { - "node": ">= 10.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/@parcel/watcher-linux-arm-glibc": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.0.tgz", - "integrity": "sha512-0VQY1K35DQET3dVYWpOaPFecqOT9dbuCfzjxoQyif1Wc574t3kOSkKevULddcR9znz1TcklCE7Ht6NIxjvTqLA==", - "cpu": [ - "arm" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/@parcel/watcher-linux-arm-musl": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.0.tgz", - "integrity": "sha512-6uHywSIzz8+vi2lAzFeltnYbdHsDm3iIB57d4g5oaB9vKwjb6N6dRIgZMujw4nm5r6v9/BQH0noq6DzHrqr2pA==", - "cpu": [ - "arm" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/@parcel/watcher-linux-arm64-glibc": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.0.tgz", - "integrity": "sha512-BfNjXwZKxBy4WibDb/LDCriWSKLz+jJRL3cM/DllnHH5QUyoiUNEp3GmL80ZqxeumoADfCCP19+qiYiC8gUBjA==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/@parcel/watcher-linux-arm64-musl": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.0.tgz", - "integrity": "sha512-S1qARKOphxfiBEkwLUbHjCY9BWPdWnW9j7f7Hb2jPplu8UZ3nes7zpPOW9bkLbHRvWM0WDTsjdOTUgW0xLBN1Q==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/@parcel/watcher-linux-x64-glibc": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.0.tgz", - "integrity": "sha512-d9AOkusyXARkFD66S6zlGXyzx5RvY+chTP9Jp0ypSTC9d4lzyRs9ovGf/80VCxjKddcUvnsGwCHWuF2EoPgWjw==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/@parcel/watcher-linux-x64-musl": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.0.tgz", - "integrity": "sha512-iqOC+GoTDoFyk/VYSFHwjHhYrk8bljW6zOhPuhi5t9ulqiYq1togGJB5e3PwYVFFfeVgc6pbz3JdQyDoBszVaA==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/@parcel/watcher-win32-arm64": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.0.tgz", - "integrity": "sha512-twtft1d+JRNkM5YbmexfcH/N4znDtjgysFaV9zvZmmJezQsKpkfLYJ+JFV3uygugK6AtIM2oADPkB2AdhBrNig==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">= 10.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/@parcel/watcher-win32-ia32": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.0.tgz", - "integrity": "sha512-+rgpsNRKwo8A53elqbbHXdOMtY/tAtTzManTWShB5Kk54N8Q9mzNWV7tV+IbGueCbcj826MfWGU3mprWtuf1TA==", - "cpu": [ - "ia32" - ], - "dev": true, - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">= 10.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/@parcel/watcher-win32-x64": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.0.tgz", - "integrity": "sha512-lPrxve92zEHdgeff3aiu4gDOIt4u7sJYha6wbdEZDCDUhtjTsOMiaJzG5lMY4GkWH8p0fMmO2Ppq5G5XXG+DQw==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">= 10.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, "node_modules/@paulirish/trace_engine": { "version": "0.0.39", "resolved": "https://registry.npmjs.org/@paulirish/trace_engine/-/trace_engine-0.0.39.tgz", diff --git a/package.json b/package.json index cd670016..70fd60a3 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,6 @@ "@wordpress/eslint-plugin": "22.1.1", "@wordpress/jest-preset-default": "12.15.1", "@wordpress/scripts": "30.8.1", - "autoprefixer": "10.4.20", "browserslist": "4.24.3", "cross-env": "7.0.3", "css-minimizer-webpack-plugin": "7.0.0", @@ -37,8 +36,6 @@ "jest-silent-reporter": "0.6.0", "lint-staged": "15.3.0", "npm-run-all": "4.1.5", - "postcss": "8.5.1", - "tailwindcss": "3.4.17", "webpack-remove-empty-scripts": "1.0.4" }, "scripts": { From 7d51435a21a9afeab48e9fad9baec3e6860f0840 Mon Sep 17 00:00:00 2001 From: nani-samireddy Date: Mon, 20 Jan 2025 19:01:41 +0530 Subject: [PATCH 3/7] Fix setup flow closing --- bin/init.js | 1 - 1 file changed, 1 deletion(-) diff --git a/bin/init.js b/bin/init.js index 96d51188..93dae601 100755 --- a/bin/init.js +++ b/bin/init.js @@ -66,7 +66,6 @@ if ( 0 === args.length ) { tailwindcssSetup(); } - rl.close(); const themeInfo = renderThemeDetails( themeName ); From 0c1632b8e76436c77ce8a391700f2438732eef36 Mon Sep 17 00:00:00 2001 From: nani-samireddy Date: Mon, 20 Jan 2025 20:02:46 +0530 Subject: [PATCH 4/7] Add tailwind setup documentation --- bin/templates/tailwindcss/tailwind.config.js | 20 ++-- docs/tailwindcss-guide.md | 112 +++++++++++++++++++ inc/classes/class-assets.php | 5 + 3 files changed, 127 insertions(+), 10 deletions(-) create mode 100644 docs/tailwindcss-guide.md diff --git a/bin/templates/tailwindcss/tailwind.config.js b/bin/templates/tailwindcss/tailwind.config.js index bbc59e83..ee7f9cf5 100644 --- a/bin/templates/tailwindcss/tailwind.config.js +++ b/bin/templates/tailwindcss/tailwind.config.js @@ -1,12 +1,12 @@ /** @type {import('tailwindcss').Config} */ module.exports = { - content: [ - // Ensure changes to PHP, html files and theme.json trigger a rebuild. - './**/*.{php,html}', - './theme.json', - ], - theme: { - extend: {}, - }, - plugins: [], -} + content: [ + // Ensure changes to PHP, html, JS, JSX files and theme.json trigger a rebuild. + './**/*.{php,html,js,jsx}', + './theme.json', + ], + theme: { + extend: {}, + }, + plugins: [], +}; diff --git a/docs/tailwindcss-guide.md b/docs/tailwindcss-guide.md new file mode 100644 index 00000000..9a40fa89 --- /dev/null +++ b/docs/tailwindcss-guide.md @@ -0,0 +1,112 @@ +# TailwindCSS Setup for WordPress Theme + +This documentation provides a guide for setting up and using TailwindCSS in your WordPress theme. The configuration files and integration steps are outlined below to ensure a seamless development experience. + +--- + +## **Setup Overview** + +### **Key Files and Locations** +- **Tailwind Configuration**: `tailwind.config.js` +- **PostCSS Configuration**: `postcss.config.js` +- **Main Tailwind CSS File**: `/assets/src/css/tailwind.scss` + +### **Automatic Enqueueing** +The main Tailwind CSS file (`tailwind.scss`) is automatically enqueued if TailwindCSS is enabled in the project. You can directly use TailwindCSS classes in your PHP, HTML, and JS files. + +--- + +## **Configuration** + +### **`tailwind.config.js`** +This file is pre-configured to watch for changes in PHP, HTML, and JS files, as well as the `theme.json`. You can extend the configuration as needed. + +Example `tailwind.config.js`: +```javascript +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: [ + './**/*.{php,html,js,jsx}', // Monitors all PHP, HTML, and JS files + './theme.json', // Watches for changes in the theme.json + ], + theme: { + extend: {}, // Extend or override default Tailwind styles here + }, + plugins: [], // Add TailwindCSS plugins here +}; +``` + +### **`postcss.config.js`** +This file ensures that TailwindCSS is processed correctly with PostCSS. If additional PostCSS plugins are required, you can add them here. + +--- + +## **Usage** + +### **Using TailwindCSS in PHP/HTML/JS** +You can use TailwindCSS classes directly in your: +- PHP files +- HTML templates +- JavaScript files (including JSX) + +Example in PHP: +```php +
+ +
+``` + +--- + +## **Compiling TailwindCSS** + +To compile the TailwindCSS into the build folder, use the following commands: + +### **Commands** +- **Start Development Server**: + ```bash + npm run start + ``` + This will initiate the development server and watch for changes. + +- **Build for Development**: + ```bash + npm run build:dev + ``` + This compiles the CSS for development use. + +- **Build for Production**: + ```bash + npm run build:prod + ``` + This compiles and optimizes the CSS for production. + +The compiled Tailwind CSS file will be placed in the `build` folder. + +--- + +## **Extending Functionality** + +To customize the theme, add configurations directly to the `tailwind.config.js` or `postcss.config.js` files. For example: +- Add custom colors or fonts in `theme.extend` within `tailwind.config.js`. +- Integrate additional PostCSS plugins like `autoprefixer` or `cssnano`. + +Example: Adding Custom Colors +```javascript +module.exports = { + theme: { + extend: { + colors: { + primary: '#1a202c', + secondary: '#2d3748', + }, + }, + }, +}; +``` + +--- + +## **Additional Notes** + +- Any of the above mentioned build commands will compile the TailiwindCSS. diff --git a/inc/classes/class-assets.php b/inc/classes/class-assets.php index 21699f94..38a2c043 100644 --- a/inc/classes/class-assets.php +++ b/inc/classes/class-assets.php @@ -18,6 +18,11 @@ class Assets { use Singleton; + /** + * `is_tailwindcss_enabled `Whether TailwindCSS is enabled or not. + * + * @var bool + */ private $is_tailwindcss_enabled = false; /** From 6ef09cc5e1bd8dcd059c6c1284e8e2b78d588f65 Mon Sep 17 00:00:00 2001 From: nani-samireddy Date: Mon, 20 Jan 2025 20:23:57 +0530 Subject: [PATCH 5/7] Fix tailwind config content path --- bin/templates/tailwindcss/tailwind.config.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/bin/templates/tailwindcss/tailwind.config.js b/bin/templates/tailwindcss/tailwind.config.js index ee7f9cf5..7253e402 100644 --- a/bin/templates/tailwindcss/tailwind.config.js +++ b/bin/templates/tailwindcss/tailwind.config.js @@ -1,8 +1,9 @@ /** @type {import('tailwindcss').Config} */ module.exports = { content: [ - // Ensure changes to PHP, html, JS, JSX files and theme.json trigger a rebuild. - './**/*.{php,html,js,jsx}', + // Ensure changes to PHP, html, JS files and theme.json trigger a rebuild. + './**/*.{php,html}', + './src/**/*.js', './theme.json', ], theme: { From 12b4c5c7bfd2b365476e530ffa65a25f5ef2d1d3 Mon Sep 17 00:00:00 2001 From: nani-samireddy Date: Mon, 20 Jan 2025 20:36:00 +0530 Subject: [PATCH 6/7] Update tailwind.scss to use @tailwind instead of @import --- bin/templates/tailwindcss/tailwind.scss | 17 +++-------------- 1 file changed, 3 insertions(+), 14 deletions(-) diff --git a/bin/templates/tailwindcss/tailwind.scss b/bin/templates/tailwindcss/tailwind.scss index fd365902..b5c61c95 100644 --- a/bin/templates/tailwindcss/tailwind.scss +++ b/bin/templates/tailwindcss/tailwind.scss @@ -1,14 +1,3 @@ -/** -* This injects Tailwind's base styles. -*/ -@import "tailwindcss/base"; - -/** - * This injects Tailwind's component classes. - */ -@import "tailwindcss/components"; - -/** - * This injects Tailwind's utility classes. - */ -@import "tailwindcss/utilities"; +@tailwind base; +@tailwind components; +@tailwind utilities; From 17759b13d1de4dc5ecdf31f468397def9e384b0c Mon Sep 17 00:00:00 2001 From: nani-samireddy Date: Mon, 20 Jan 2025 20:42:26 +0530 Subject: [PATCH 7/7] Update the tailwind config content types --- bin/templates/tailwindcss/tailwind.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bin/templates/tailwindcss/tailwind.config.js b/bin/templates/tailwindcss/tailwind.config.js index 7253e402..8fe79877 100644 --- a/bin/templates/tailwindcss/tailwind.config.js +++ b/bin/templates/tailwindcss/tailwind.config.js @@ -3,7 +3,7 @@ module.exports = { content: [ // Ensure changes to PHP, html, JS files and theme.json trigger a rebuild. './**/*.{php,html}', - './src/**/*.js', + './src/**/*.{scss,css,js,jsx}', './theme.json', ], theme: {