prepare for tailwind 1.0.0

Author: forsartis

generator/index.js

@@ -28,12 +28,21 @@ function readPostcssConfig(generator) {
   return {};
 }
 
+function generateConfig(option) {
+  const args = ['init'];
+  if (option === 'full') {
+    args.push('--full');
+  }
+  const { spawnSync } = require('child_process');
+  spawnSync('./node_modules/.bin/tailwind', args);
+}
+
 module.exports = (api, options) => {
   const postcss = readPostcssConfig(api.generator);
   const configs = {
     postcss: {
       plugins: {
-        tailwindcss: './tailwind.config.js',
+        tailwindcss: {},
         'vue-cli-plugin-tailwind/purgecss': {},
       },
     },
@@ -46,8 +55,20 @@ module.exports = (api, options) => {
   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']);
-  });
+  if (options.overwriteConfig) {
+    const filename = 'tailwind.config.js';
+    delete api.generator.files[filename];
+    const configPath = path.join(api.generator.context, filename);
+    try {
+      fs.unlinkSync(configPath);
+    } catch (error) {
+      throw new Error(error);
+    }
+  }
+
+  if (options.initConfig && options.overwriteConfig !== false) {
+    api.onCreateComplete(() => {
+      generateConfig(options.initConfig);
+    });
+  }
 };

generator/template/src/assets/tailwind.css

@@ -1,62 +1,5 @@
-/**
- * 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;
+@tailwind base;
 
-/**
- * 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";
- */

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-cli-plugin-tailwind",
-  "version": "0.4.2",
+  "version": "1.0.0-beta.1",
   "description": "vue-cli plugin for Tailwind CSS",
   "author": "Jens Eggerstedt <j.eggerstedt@kaibatech.de>",
   "license": "MIT",
@@ -19,9 +19,6 @@
   ],
   "dependencies": {
     "@fullhuman/postcss-purgecss": "^1.1.0",
-    "tailwindcss": "^0.7.4"
-  },
-  "peerDependencies": {
-    "@vue/cli-shared-utils": "^3.0.0"
+    "tailwindcss": "^1.0.0-beta.3"
   }
 }

prompts.js

@@ -0,0 +1,24 @@
+const fs = require('fs');
+
+module.exports = [
+  {
+    type: 'list',
+    name: 'initConfig',
+    message: 'Generate tailwind.config.js',
+    choices: [
+      { name: 'none', value: false },
+      { name: 'minimal', value: 'minimal' },
+      { name: 'full', value: 'full' },
+    ],
+    default: 1,
+  },
+  {
+    name: 'overwriteConfig',
+    type: 'confirm',
+    message: 'tailwind.config.js already exists! Do you want to overwrite?',
+    default: false,
+    when: answers => {
+      return answers.initConfig && fs.existsSync('./tailwind.config.js');
+    },
+  },
+];

purgecss/index.js

@@ -8,7 +8,7 @@ class TailwindExtractor {
 }
 
 let config = {
-  content: ['./public/index.html', './src/**/*.vue'],
+  content: ['./public/**/*.html', './src/**/*.vue'],
   extractors: [
     {
       extractor: TailwindExtractor,