Add WordPress examples

Author: benfurfie

Diff for: examples/wordpress/.gitignore

@@ -0,0 +1,21 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

Diff for: examples/wordpress/README.md

@@ -0,0 +1,102 @@
+# WordPress
+
+Setting up TailwindCSS in WordPress is relatively simple. Navigate to your WordPress theme folder:
+
+```bash
+cd wp-content/themes/{your_theme}
+```
+
+First thing we need to do is create a package.json file.
+
+```bash
+npm init
+```
+
+Follow the instructions and once it's done, the next step is to install Tailwind itself.
+
+```bash
+npm install tailwindcss -D
+```
+
+We then need to create a configuration file. To do this, run the following in your theme folder:
+
+```bash
+./node_modules/.bin/tailwind init
+```
+
+This will create the config file for called `tailwind.config.js` within your theme folder.
+
+Because WordPress doesn't come with a compilation tool built in, we need to install one. For this tutorial, we'll be using Laravel Mix, which is a wrapper built around Webpack. It's much easier to use and works perfectly fine with WordPress.
+
+## Laravel Mix
+
+In your WordPress theme folder, install Laravel Mix:
+
+```bash
+npm install laravel-mix
+```
+
+For the sake of this example, we're going to create our CSS file in `resources/css/style.css`. This is in your theme folder, so it'll be something like `wp-content/themes/{your_theme}/resources/css/style.css`.
+
+In that file, add:
+
+```postCss
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+Now create a file called `webpack.mix.js` in your theme folder. In it, add the following:
+
+```javascript
+const mix = require('laravel-mix');
+const tailwindcss = require('tailwindcss');
+
+mix.postCss('./resources/css/style.css', './css/style.css',
+	tailwindcss('./tailwind.config.js')
+);
+```
+
+We also need to install a package called `cross-env`. This is only really required if you're working on Windows.
+
+```bash
+npm install cross-env
+```
+
+Once you've done that, open your `package.json` file and add the following:
+
+```json
+"scripts": {
+    "dev": "npm run development",
+    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "watch": "npm run development -- --watch",
+    "watch-poll": "npm run watch -- --watch-poll",
+    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "prod": "npm run production",
+    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
+},
+```
+
+After you've done this, run `npm run dev`. This will output a your css file at `/css/style.css`.
+
+To hook this into your WordPress theme, within functions.php, add the following:
+
+```php
+function add_tailwind() {
+    wp_enqueue_style( 'style', get_template_directory_uri() . '/css/style.css' );
+}
+add_action('wp_enqueue_scripts', 'add_tailwind');
+}
+```
+
+If you load your theme, you should now see the default styling.
+
+## Build once
+```bash
+npm run dev
+```
+
+## Keep building
+```bash
+npm run watch
+```

Diff for: examples/wordpress/functions.php

@@ -0,0 +1,6 @@
+<?php
+
+function add_tailwind() {
+    wp_enqueue_style( 'tailwind', get_template_directory_uri() . '/css/style.css' );
+}
+add_action('wp_enqueue_scripts', 'add_tailwind');

Diff for: examples/wordpress/index.php

@@ -0,0 +1,9 @@
+<?php
+
+get_header();
+
+    echo '<section class="container mx-auto py-10">';
+        echo '<h1>Welcome to Tailwind for WordPress</h1>';
+    echo '</section>';
+
+get_footer();

Diff for: examples/wordpress/package.json

@@ -0,0 +1,19 @@
+{
+    "name": "tailwind-for-wordpress",
+    "version": "0.1.0",
+    "private": true,
+    "scripts": {
+        "dev": "npm run development",
+        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "watch": "npm run development -- --watch",
+        "watch-poll": "npm run watch -- --watch-poll",
+        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "prod": "npm run production",
+        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
+    },
+    "dependencies": {
+        "cross-env": "^5.2.0",
+        "laravel-mix": "^4.0.16",
+        "tailwindcss": "^1.0.3"
+    }
+}

Diff for: examples/wordpress/resources/css/style.css

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

Diff for: examples/wordpress/style.css

@@ -0,0 +1,7 @@
+/*
+    Theme Name: Tailwind for WordPress
+    Description: A WordPress theme built to work with TailwindCSS
+    Version: 1.0
+    License: GNU General Public License v2 or later
+    License URI: http://www.gnu.org/licenses/gpl-2.0.html
+*/

Diff for: examples/wordpress/tailwind.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  theme: {
+    extend: {}
+  },
+  variants: {},
+  plugins: []
+}

Diff for: examples/wordpress/webpack.mix.js

@@ -0,0 +1,6 @@
+const mix = require('laravel-mix');
+const tailwindcss = require('tailwindcss');
+
+mix.postCss('./resources/css/style.css', './css/style.css',
+	tailwindcss('./tailwind.config.js')
+);