Tailwindcss: [1.0.0-beta.7] PostCSS "require(...) is not a function"

[marbuser]

So on the "stable" version of TailwindCSS, the current stuff I do below works perfectly. However, on the new version it has some issues.

Module build failed (from ./node_modules/postcss-loader/src/index.js): TypeError: require(...) is not a function

I'm using a default Vue CLI app with the Tailwind Beta installed and using the default config.

If I remove the tailwind entry from the postcss config, it works fine.
It seems to be erroring on the line let defaultConfig = require('tailwindcss/defaultConfig')() in the config file.

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

// app.css
@tailwind preflight;
@tailwind components;
@tailwind utilities;

// main.js
import '@/css/app.css';

import Vue from 'vue';

import App from './App.vue';
import router from './router';
import store from './store';

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app');

[adamwathan]

From the upgrade guide:

https://next.tailwindcss.com/docs/upgrading-to-v1#2-update-your-config-file

[adamwathan]

Weird, the CLI has been updated and generates this file by default:

https://github.com/tailwindcss/tailwindcss/blob/next/stubs/simpleConfig.stub.js

Or this file if you use tailwind init --full:

https://github.com/tailwindcss/tailwindcss/blob/next/stubs/defaultConfig.stub.js

The file should be called tailwind.config.js, but in your example you were referencing tailwind.js. Are you sure you are loading the new default config file? Maybe you have both in your project somehow?