init commit

Author: forsartis

.gitignore

@@ -0,0 +1,17 @@
+.DS_Store
+node_modules
+yarn.lock
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*

generator/index.js

@@ -0,0 +1,25 @@
+module.exports = (api, options) => {
+  const configs = {
+    postcss: {
+      plugins: {
+        tailwindcss: './tailwind.config.js',
+      },
+    },
+  };
+  api.addConfigTransform('postcss', {
+    file: {
+      js: ['postcss.config.js'],
+      json: ['.postcssrc.json', '.postcssrc'],
+      yaml: ['.postcssrc.yaml', '.postcssrc.yml'],
+    },
+  });
+  api.extendPackage(configs);
+
+  api.injectImports(api.entryFile, `import './assets/tailwind.css'`);
+  api.render('./template');
+
+  api.onCreateComplete(() => {
+    const { spawnSync } = require('child_process');
+    spawnSync('./node_modules/.bin/tailwind', ['init', 'tailwind.config.js']);
+  });
+};

generator/template/src/assets/tailwind.css

@@ -0,0 +1,62 @@
+/**
+ * This injects Tailwind's base styles, which is a combination of
+ * Normalize.css and some additional base styles.
+ *
+ * You can see the styles here:
+ * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
+ *
+ * If using `postcss-import`, use this import instead:
+ *
+ * @import "tailwindcss/preflight";
+ */
+@tailwind preflight;
+
+/**
+ * This injects any component classes registered by plugins.
+ *
+ * If using `postcss-import`, use this import instead:
+ *
+ * @import "tailwindcss/components";
+ */
+@tailwind components;
+
+/**
+ * Here you would add any of your custom component classes; stuff that you'd
+ * want loaded *before* the utilities so that the utilities could still
+ * override them.
+ *
+ * Example:
+ *
+ * .btn { ... }
+ * .form-input { ... }
+ *
+ * Or if using a preprocessor or `postcss-import`:
+ *
+ * @import "components/buttons";
+ * @import "components/forms";
+ */
+
+/**
+ * This injects all of Tailwind's utility classes, generated based on your
+ * config file.
+ *
+ * If using `postcss-import`, use this import instead:
+ *
+ * @import "tailwindcss/utilities";
+ */
+@tailwind utilities;
+
+/**
+ * Here you would add any custom utilities you need that don't come out of the
+ * box with Tailwind.
+ *
+ * Example :
+ *
+ * .bg-pattern-graph-paper { ... }
+ * .skew-45 { ... }
+ *
+ * Or if using a preprocessor or `postcss-import`:
+ *
+ * @import "utilities/background-patterns";
+ * @import "utilities/skew-transforms";
+ */

index.js

@@ -0,0 +1 @@
+module.exports = () => {};

package.json

@@ -0,0 +1,18 @@
+{
+  "name": "vue-cli-plugin-tailwind",
+  "version": "0.1.0",
+  "author": "Jens Eggerstedt <j.eggerstedt@kaibatech.de>",
+  "license": "MIT",
+  "dependencies": {
+    "glob-all": "^3.1.0",
+    "purgecss-webpack-plugin": "^1.3.0",
+    "tailwindcss": "^0.6.5"
+  },
+  "keywords": [
+    "vue",
+    "cli",
+    "plugin",
+    "tailwind",
+    "purgecss"
+  ]
+}

webpack/index.js

@@ -0,0 +1,22 @@
+const path = require('path');
+const glob = require('glob-all');
+const PurgecssPlugin = require('purgecss-webpack-plugin');
+
+class TailwindExtractor {
+  static extract(content) {
+    return content.match(/[A-Za-z0-9-_:\/]+/g) || [];
+  }
+}
+
+module.exports = new PurgecssPlugin({
+  paths: glob.sync([
+    path.join(process.cwd(), 'public/index.html'),
+    path.join(process.cwd(), 'src/**/*.vue'),
+  ]),
+  extractors: [
+    {
+      extractor: TailwindExtractor,
+      extensions: ['html', 'js', 'vue'],
+    },
+  ],
+});