I followed the upgrade instructions on tailwindcss docs but after installing PostCSS 7 compatibility build I get this error when I run
npm run development -- --watch
error in ./resources/css/app.css
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
TypeError: value.charCodeAt is not a function
My tailwind.config.js is
module.exports = {
future: {
removeDeprecatedGapUtilities: true,
purgeLayersByDefault: true,
},
purge: [],
theme: {},
variants: {},
plugins: [
require('@tailwindcss/ui'),
],
}
and my webpack.mix.js
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require('tailwindcss'),
require('autoprefixer'),
])
.browserSync({
browser: 'google chrome',
proxy: 'inspect.test',
host: "inspect.test",
open: 'external',
port: 3000,
notify: false,
watch: true,
});
Any help would be appreciated. Paul
Hi Paul,
I have managed to find a temporary solution for this. Just comment this @import 'tailwindcss/components'; code in app.css in your resource folder. But please bear in mind if you are using tailwindcss/components then it is best to wait for official fix.
Ps. form-input is now changed too in tailwind, check here https://tailwindui.com/changes-for-v2
Please tell if it works for you.
@rezuankassim your solution actually works
This works for me as I'm not using components in this project.
you can leave components on there, it is 'require('@tailwindcss/ui')' in tailwind.config.js that causes the issue for me.
Do the following for no issues:
npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
npm install @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio
tailwind.config.js
module.exports = {
// ...
plugins: [
// require('@tailwindcss/ui'),
require('@tailwindcss/forms'),
require('@tailwindcss/typography'),
require('@tailwindcss/aspect-ratio'),
]
}
npm run dev
This worked for me thank you.
I am having this issue too .
I'm having same issue. does anyone know if commenting out the components will break Jetstream?
Adam Wathan tweeted this
For anyone using Tailwind CSS v2.0 with PostCSS 7, we had to change how we publish the compatibility build due to some bone-headed assumptions I made about semver calculations
Should fix issues you might be having!
Updated installation details here: https://tailwindcss.com/docs/installation#post-css-7-compatibility-build
ive tried this, it still gets the same error
you can leave components on there, it is 'require('@tailwindcss/ui')' in tailwind.config.js that causes the issue for me.
Do the following for no issues:
npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
npm install @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio
tailwind.config.js
module.exports = {
// ...
plugins: [
// require('@tailwindcss/ui'),
require('@tailwindcss/forms'),
require('@tailwindcss/typography'),
require('@tailwindcss/aspect-ratio'),
]
}
npm run dev
This should be marked as The Best Answer. Thank you!
@finchy70 would you?
Got this reply from Adam
The tailwindcss/ui plugin is not compatible with Tailwind CSS v2.0, check out the upgrade documentation on Tailwind UI for more details: https://tailwindui.com/changes-for-v2 Will try to remember to add a note about this to the Tailwind docs.
Please or to participate in this conversation.