prepare for tailwind CSS v3

Author: forsartis

README.md

@@ -27,23 +27,5 @@ module.exports = {
   },
 };
 ```
-### Custom Tailwind config file name
-If you use a name other than `tailwind.config.js` for the Tailwind config file, you will need to specify it in your PostCSS configuration.
-```javascript
-// postcss.config.js
-module.exports = {
-  plugins: {
-    tailwindcss: 'custom-name.js',
-    //...
-  },
-};
-```
-### Configure PurgeCSS
-By default PurgeCSS will look for css selectors in your `.html` files inside the `./public` directory and `.vue, .js, .ts, .jsx, .tsx` files inside the `./src` directory.
-```javascript
-purge: ['./public/**/*.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
-```
-Check [https://tailwindcss.com/docs/optimizing-for-production](https://tailwindcss.com/docs/optimizing-for-production) for more info.
-
 ## License
 [MIT](https://github.com/forsartis/vue-cli-plugin-tailwind/blob/master/LICENSE)

generator/index.js

@@ -43,14 +43,14 @@ function generateConfig(api, option) {
   });
 }
 
-function injectPurgeConfig(api) {
+function injectContentConfig(api) {
   const configPath = api.resolve(filenameTailwind);
   const tailwindConfig = fs.readFileSync(configPath, 'utf-8');
   fs.writeFileSync(
     configPath,
     tailwindConfig.replace(
-      'purge: []',
-      "purge: ['./public/**/*.html', './src/**/*.{vue,js,ts,jsx,tsx}']",
+      'content: []',
+      "content: ['./public/**/*.html', './src/**/*.{vue,js,ts,jsx,tsx}']",
     ),
   );
 }
@@ -59,10 +59,9 @@ module.exports = (api, options) => {
   const postcss = readPostcssConfig(api);
   const configs = {
     dependencies: {
-      '@tailwindcss/postcss7-compat': '^2.2.17',
-      autoprefixer: '^9',
-      postcss: '^7',
-      tailwindcss: 'npm:@tailwindcss/postcss7-compat@^2.2.17',
+      autoprefixer: '^10',
+      postcss: '^8',
+      tailwindcss: '^3',
     },
     postcss: {
       plugins: {
@@ -92,7 +91,7 @@ module.exports = (api, options) => {
   if (options.initConfig && options.replaceConfig !== false) {
     api.onCreateComplete(() => {
       generateConfig(api, options.initConfig);
-      injectPurgeConfig(api);
+      injectContentConfig(api);
     });
   }
 };