I updated tailwind from v2 to v3 and now some classes are missing. I have tried to reinstall tailwind and its dependencies, but it did not help. What is causes such strange behaviour?
Example:
w-6/12
w-7/12 <- does not exist
w-8/12
w-9/12
w-10/12
w-11/12 <- does not exist
w-12/12 <- does not exist
And other classes from grid, fonts-sizes, etc.
Versions
tailwindcss: 3.0.15
tailwindcss/aspect-ratio: 0.4.0
tailwindcss/forms: 0.4.0
tailwindcss/line-clamp: 0.3.1
tailwindcss/typography: 0.5.0
tailwind.config.js
const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = {
content: [
'./storage/framework/views/*.php',
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./vendor/laravel/jetstream/**/*.blade.php',
'./resources/views/**/*.blade.php',
],
prefix: 'tw-',
theme: {
extend: {
fontFamily: {
sans: ['Nunito', ...defaultTheme.fontFamily.sans],
},
},
backgroundColor: theme => ({
...theme('colors'),
'header': '#ffffff',
'main': '#f2f2f3',
'content': '#ffffff'
}),
textColor: theme => ({
...theme('colors'),
'main': '#333333'
})
},
plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
}
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")])
.sass('resources/sass/app.scss', 'public/css')
.sourceMaps();
resources/css/app.css
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
Solved this pseudo issue.
The problem was that I didn't quite understand the new thing about changing purge
to content
and that now I have to compile the styles whenever I change them. Also, the previous version of phpstorm didn't see the classes and didn't give hints because of this.