vue3 struggles

[9mm]

Hey I'm new to vue, so I apologize if these don't really go here.

problem 1

I am using vue3 beta and I ran vue add tailwindcss and I get these build errors:

🚀  Invoking generator for vue-cli-plugin-tailwindcss...
⠋  Running completion hooks...error: Unexpected require() (global-require) at tailwind.config.js:898:5:
  896 |
  897 |   plugins: [
> 898 |     require('tailwindcss/plugins/container')({
      |     ^
  899 |       // center: true,
  900 |       // padding: '1rem',
  901 |     }),

error: 'tailwindcss' should be listed in the project's dependencies, not devDependencies (import/no-extraneous-dependencies) at tailwind.config.js:898:13:
  896 |
  897 |   plugins: [
> 898 |     require('tailwindcss/plugins/container')({
      |             ^
  899 |       // center: true,
  900 |       // padding: '1rem',
  901 |     }),

2 errors found.

problem 2

It doesnt seem like its actually purging. It says in the readme it adds purgecss but this is the config file after running it:

module.exports = {
  plugins: {
    tailwindcss: './tailwind.config.js',
    autoprefixer: {},
  },
};

I also dont see purgecss used anywhere? When I run NODE_ENV=production yarn build the css file is 250KB with lots of utility classes in it that I don't use (my app is literally blank, so it should be a very small file)

Thanks!

[forsartis]

Hey, looks like you installed another plugin. For this one it is vue add tailwind without css at the end.