Feature: Add TailwindCSS support to the theme

bin/init.js

@@ -41,7 +41,7 @@ const info = {
  */
 const getRoot = () => {
 	return path.resolve( __dirname, '../' );
-}
+};
 
 let fileContentUpdated = false;
 let fileNameUpdated = false;
@@ -60,25 +60,33 @@ if ( 0 === args.length ) {
 
 		rl.question( 'Enter theme name (shown in WordPress admin)*: ', ( themeName ) => {
 
-			const themeInfo = renderThemeDetails( themeName );
+			rl.question( 'Would you like to add TailwindCSS support? (y/n) ', ( tailwindAnswer ) => {
 
-			rl.question( 'Confirm the Theme Details (y/n) ', ( confirm ) => {
+				if ( 'y' === tailwindAnswer.toLowerCase() ) {
 
-				if ( 'n' === confirm.toLowerCase() ) {
-					console.log( info.warning( '\nTheme Setup Cancelled.\n' ) );
-					rl.close();
+					tailwindcssSetup();
 				}
-
-				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();
+					} );
 				} );
 			} );
 		} );
@@ -93,6 +101,48 @@ rl.on( 'close', () => {
 	process.exit( 0 );
 } );
 
+/**
+ * Setup the TailwindCSS files.
+ */
+const tailwindcssSetup = () => {
+
+	const tailwindFiles = [
+		{
+			path: path.resolve( getRoot(), 'tailwind.config.js' ),
+			source: path.resolve( getRoot(), 'bin/templates/tailwindcss/tailwind.config.js' ),
+		},
+		{
+			path: path.resolve( getRoot(), 'postcss.config.js' ),
+			source: path.resolve( getRoot(), 'bin/templates/tailwindcss/postcss.config.js' ),
+		},
+		{
+			path: path.resolve( getRoot(), 'assets/src/css/tailwind.scss' ),
+			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 ) => {
+		copyFileContents( file.path, file.source );
+	} );
+
+	console.log( info.success( '\nTailwindCSS setup completed!' ), '✨' );
+};
+
+/**
+ * Creates a file with the given content.
+ * @param {string} filePath Path to the file.
+ * @param {string} source  Path to the source file.
+ */
+const copyFileContents = ( filePath, source ) => {
+	// copy the file contents.
+	fs.copyFileSync( source, filePath );
+};
+
 /**
  * Update composer.json file.
  *
@@ -587,6 +637,7 @@ const generateThemeInfo = ( themeName ) => {
 const runThemeCleanup = () => {
 	const deleteDirs = [
 		'.github',
+		'bin/templates',
 		'bin/init.js',
 		'languages',
 	];

bin/templates/tailwindcss/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {},
+	},
+};

bin/templates/tailwindcss/tailwind.config.js

@@ -0,0 +1,13 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+	content: [
+		// Ensure changes to PHP, html, JS files and theme.json trigger a rebuild.
+		'./**/*.{php,html}',
+		'./src/**/*.{scss,css,js,jsx}',
+		'./theme.json',
+	],
+	theme: {
+		extend: {},
+	},
+	plugins: [],
+};

bin/templates/tailwindcss/tailwind.scss

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

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
+<div class="bg-blue-500 text-white p-4">
+    <?php echo esc_html__('Hello, TailwindCSS!', 'your-theme'); ?>
+</div>
+```
+
+---
+
+## **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.

inc/classes/class-assets.php

@@ -18,12 +18,22 @@ class Assets {
 
 	use Singleton;
 
+	/**
+	 * `is_tailwindcss_enabled `Whether TailwindCSS is enabled or not.
+	 * 
+	 * @var bool
+	 */
+	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 +59,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 +183,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' );
+		}
 	}
 }