Add Laravel Mix and Tailwind

wp-content/themes/wp-tailwind/.gitignore

@@ -0,0 +1,4 @@
+/mix-manifest.json
+/node_modules/
+/style.css
+/yarn.lock

wp-content/themes/wp-tailwind/package.json

@@ -0,0 +1,15 @@
+{
+  "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",
+    "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"
+  },
+  "devDependencies": {
+    "cross-env": "^5.2.0",
+    "laravel-mix": "^4.0.14",
+    "tailwindcss": "https://github.com/tailwindcss/tailwindcss.git#next"
+  }
+}

wp-content/themes/wp-tailwind/src/css/style.css

@@ -0,0 +1,13 @@
+@tailwind base;
+
+a {
+    @apply text-grey-darker no-underline
+}
+a:hover,
+a:focus {
+  @apply text-blue-dark underline
+}
+
+@tailwind components;
+
+@tailwind utilities;

wp-content/themes/wp-tailwind/tailwind.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        'blue-dark': '#0073aa',
+        'grey-darker': '#767676',
+      }
+    }
+  }
+}

wp-content/themes/wp-tailwind/webpack.mix.js

@@ -0,0 +1,5 @@
+const mix = require('laravel-mix')
+
+mix.postCss('src/css/style.css', '', [
+  require('tailwindcss')('./tailwind.config.js'),
+])