Tailwind missing classes after update from v2 to v3 Laravel 8 - laravel

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.

Related

Build separate CSS files using Tailwindcss and laravel-vite-plugin

I'm trying to build two separate CSS files using Tailwindcss, Laravel and vite-plugin.
The two css files use different configuration, but I have no idea how specify the correct tailwind.config.js for each builds.
app.css should use tailwind.config.js
mail.css should use tailwind-mail.config.js
vite.config.js
import { defineConfig } from "vite"
import laravel from "laravel-vite-plugin"
export default defineConfig({
plugins: [
laravel({
input: ["resources/css/app.css", "resources/js/app.js", "resources/css/mail.css"]
refresh: true,
})
]
})
postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
tailwind.config.js
module.exports = {
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./vendor/laravel/jetstream/**/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
],
theme: {},
plugins: [require("#tailwindcss/forms"), require("#tailwindcss/typography")],
}
tailwind-mail.config.js
module.exports = {
content: ["./resources/views/mails/**/*.blade.php"],
theme: {},
plugins: [require("#tailwindcss/typography")],
}
I haven't try myself yet, but reading the release notes of Tailwind CSS v3.2 it should be fairly easy to split into two CSS files using #config <filename>:
app.css
#config "./tailwind.config.js";
#tailwind base;
#tailwind components;
#tailwind utilities;
mail.css
#config "./tailwind.mail.config.js";
#tailwind base;
#tailwind components;
#tailwind utilities;
vite.config.js
import { defineConfig } from "vite"
import laravel from "laravel-vite-plugin"
export default defineConfig({
plugins: [
laravel({
input: ["resources/css/app.css", "resources/js/app.js", "resources/css/mail.css"]
refresh: true,
})
]
})

Tailwind on Laravel project doesn't contain all basic css classes [duplicate]

Okay, so I'm about to put my Laravel project in production. I tested everything on local host and it works perfectly using Tailwind 3. Yet, when I ran some PHP artisan commands to clear all cache and etc., migrate:fresh my database, and then ran npm run dev, I noticed that Tailwind removed the styles that I used in seeding blogs (I use seed to seed fake blog posts and view how they will look like).
For example I'm using the Typography Tailwind plugin with the utility-class prose and so on. When I ran migrate:fresh and the fake blog post deleted from database, then cleared Laravel cache, and ran npm run dev, I noticed that all the prose styles are being removed from app.css. Of course I don't want that because this should be applied on each and every blog post that I will submit in production.
So how can I stop Tailwind from deleting these styles? I currently have all that I need and I don't want anything else removed.
webpack.mix
const mix = require("laravel-mix");
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.js("resources/js/app.js", "public/js")
.vue()
.postCss("resources/css/app.css", "public/css", [
require("postcss-import"),
require("tailwindcss"),
require("autoprefixer"),
]);
tailwind.config.js
const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = {
darkMode: "class",
content: [
"./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
"./storage/framework/views/*.php",
"./resources/views/*.blade.php",
"./resources/views/components/*.blade.php",
"./resources/views/auth/*.blade.php",
"./resources/views/layouts/*.blade.php",
"./resources/js/components/categories/*.vue",
"./resources/js/components/**/*.vue",
],
theme: {
screens: {
xs: "364px",
sm: "430px",
sd: "644px",
md: "768px",
lg: "1024px",
xl: "1155px",
"2xl": "1280px",
},
extend: {
fontFamily: {
sans: ["Nunito", ...defaultTheme.fontFamily.sans],
},
typography: ({ theme }) => ({
white: {
css: {
"--tw-prose-body": theme("colors.white"),
"--tw-prose-headings": theme("colors.blue[400]"),
"--tw-prose-lead": theme("colors.purple[700]"),
"--tw-prose-links": theme("colors.blue[800]"),
"--tw-prose-bold": theme("colors.blue[800]"),
"--tw-prose-counters": theme("colors.blue[900]"),
"--tw-prose-bullets": theme("colors.blue[900]"),
"--tw-prose-hr": theme("colors.blue[800]"),
"--tw-prose-quotes": theme("colors.blue[800]"),
"--tw-prose-quote-borders": theme("colors.blue[800]"),
"--tw-prose-captions": theme("colors.blue[800]"),
"--tw-prose-code": theme("colors.blue[800]"),
"--tw-prose-pre-code": theme("colors.blue[200]"),
"--tw-prose-pre-bg": theme("colors.gray[900]"),
"--tw-prose-th-borders": theme("colors.blue[300]"),
"--tw-prose-td-borders": theme("colors.blue[200]"),
},
},
black: {
css: {
"--tw-prose-body": theme("colors.black"),
},
},
}),
},
},
plugins: [
require("#tailwindcss/forms"),
require("#tailwindcss/typography"),
],
};
Tailwind will only include the classes that it finds by scanning the files specified in the content array in tailwind.config.js. If you want to include additional classes that are only in your dynamic content, you can safelist those classes in your config. For example:
module.exports = {
...
safelist: [
'prose',
'prose-xl',
],
...
}
See: https://tailwindcss.com/docs/content-configuration#safelisting-classes

Laravel TailwindCSS Adding more colors not working

In my case, I want to add more colors from the TailwindCSS Palette. The versions I've got now are:
├── #tailwindcss/forms#0.3.3
├── #tailwindcss/typography#0.4.1
└── tailwindcss#2.2.15
Here is my tailwind.config.js file:
tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme');
const colors = require('tailwindcss/colors');
module.exports = {
mode: 'jit',
purge: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./vendor/laravel/jetstream/**/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
],
theme: {
extend: {
fontFamily: {
sans: ['Nunito', ...defaultTheme.fontFamily.sans],
},
colors: {
transparent: 'transparent',
current: 'currentColor',
amber: colors.amber,
black: colors.black,
blue: colors.blue,
cyan: colors.cyan,
emerald: colors.emerald,
fuchsia: colors.fuchsia,
gray: colors.trueGray,
blueGray: colors.blueGray,
coolGray: colors.coolGray,
trueGray: colors.trueGray,
warmGray: colors.warmGray,
green: colors.green,
indigo: colors.indigo,
lime: colors.lime,
orange: colors.orange,
pink: colors.pink,
purple: colors.purple,
red: colors.red,
rose: colors.rose,
sky: colors.sky,//warn - As of Tailwind CSS v2.2, `lightBlue` has been renamed to `sky`.
teal: colors.teal,
violet: colors.violet,
yellow: colors.amber,
white: colors.white,
},
},
},
plugins: [require('#tailwindcss/forms'), require('#tailwindcss/typography')],
};
Then I ran npm run dev and deleted my Firefox caché.
The following color classes do work:
bg-amber-600
bg-green-600
bg-indigo-600
bg-blue-600
bg-orange-600
bg-sky-600
bg-red-600
bg-yellow-600
However, the following colors do not work:
bg-black-600
bg-fuchsia-600
bg-gray-600
bg-emerald-600
bg-cyan-600
bg-lime-600
bg-pink-600
bg-purple-600
bg-rose-600
bg-teal-600
bg-violet-600
bg-blueGray-600
bg-coolGray-600
bg-trueGray-600
bg-warmGray-600
webpack.mix.js
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
]);
if (mix.inProduction()) {
mix.version();
}
Why is this happening? How do I fix it? Then how do I import all the colors? Can't all the colors be imported?
These are the colors you are getting https://github.com/tailwindlabs/tailwindcss/blob/master/src/public/colors.js
bg-black-600 for instance doesn't exist, there are no shades of black in default tailwind, only shades of gray and some of them have getters for alternative names
If you aren't getting those you can try console logging the colors you are importing and see if your dependency is correct.
If some still aren't working you can just manually copy the js into your config file. I would also do a quick search in your CSS bundle to 100% check that the colors are there. Also as a final debug you can check the CSS that is used in your browser by looking through the dev tools to check the CSS sheet that is getting fetched (A string search for something like bg-rose-600 would work)

How to resolve aliases in mocha-webpack for laravel vue single file components

I am using vuejs in Laravel 5.7 to build an SPA. I am using mocha-webpack and vue-test-utils to write some vue component tests.
The tests can't seem to work out stylesheet imports into components. For example: I have a ExampleComponent.vue which includes the following:
</script>
<style lang="scss" scoped>
#import '#/_variables.scss';
.subpanel-control > ul > li {
background-color: lighten($body-bg, 50);
margin-left: 10px;
height: 25px;
width: 25px;
line-height: 25px;
color: $body-bg;
}
when running npm run test I get the following error:
Error in ./resources/assets/js/components/Panel.vue?vue&type=style&index=0&id=21f01f46&lang=scss&scoped=true&
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
#import '#/variables';
^
Can't find stylesheet to import.
╷
98 │ #import '#/variables';
│ ^^^^^^^^^^^^^
╵
stdin 98:9 root stylesheet
in C:\Users\jjackson\Documents\projects\wave\resources\assets\js\components\Panel.vue (line 98, column 9)
I can't work out why it doesn't understand the alias #. Here is my webpack.mix.js:
let mix = require('laravel-mix');
const path = require('path');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.sass('resources/assets/sass/nifty.scss', 'public/css', {
implementation: require('node-sass')
})
.sass('resources/assets/sass/themes/type-b/theme-ocean.scss', 'public/css')
.less('resources/assets/less/bootstrap-4-utilities.less', 'public/css')
.webpackConfig({
resolve: {
alias: {
'#': path.resolve('resources/assets/sass'),
'~': path.resolve('resources/assets/js')
}
}
})
.sourceMaps();
if (mix.inProduction()) {
mix.version();
}
Any help would be appreciated
While struggling with the same issue I landed on this page - https://github.com/vuejs/vue-cli/issues/4053 and a comment from robbishop that lead me to my solution.
Using the above I managed to find a configuration in webpack.mix.js that seem to work:
First install null-loader (npm i -D null-loader)
Add the following line in rules:
{ test: /\.scss$/, use: [{ loader: 'null-loader' }] }
My webpack.mix.js looks like that:
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.webpackConfig({
module: {
rules: [
{ test: /\.scss$/, use: [{ loader: 'null-loader' }] }
]
},
resolve: {
alias: {
'#': path.resolve('somepath/sass')
}
}
})
.sass('some/path/app.scss', 'some/path/css');
My unit tests are now executed while having scss imports in my components.
This turned out to be a docker problem. Was trying to run npm run dev outside of the docker environment, and it was causing this error. When I ran all npm commands inside of the container everything worked fine

Laravel mix compiling vuetify styles.sass to empty css file

I'm trying to compile vuetify 2.0.0-beta.9 SASS using laravel mix. The output of the styles.sass is an empty css file. How can I fix this?
As per the documentation (), First I ran:
$ npm install sass sass-loader fibers deepmerge --dev
Then created a main.scss file in resources/sass. Which contains the following:
#import '~vuetify/src/styles/main.sass';
#import '~vuetify/src/styles/styles.sass';
$body-font-family: 'Amiri', serif;
This produces a css file that seems incomplete because the styling of the site goes crazy while works fine if I just link a CDN or import a compiled one from ~vuetify/dist/vuetify.css
I need to compile it myself rather than just importing from ~vuetify/dist/vuetify.css because I want to change the $body-font-family variable.
To test, I first commented the styles.sass,
#import '~vuetify/src/styles/main.sass';
//#import '~vuetify/src/styles/styles.sass';
//$body-font-family: 'Amiri', serif;
This confirmed that main.sass is being compiled. So next, I tried:
//#import '~vuetify/src/styles/main.sass';
#import '~vuetify/src/styles/styles.sass';
//$body-font-family: 'Amiri', serif;
Which output a file with only the following:
/** Ripples */
/** Elements */
SOLVED: davejm's sample project using vuetify-loader solved it for me! Thanks!
github.com/nekosaur/laravel-vuetify
After many issues, I solve this on Laravel 8.
// Dependencies
{
"laravel-mix": "^6.0.6",
"sass": "^1.20.1",
"sass-loader": "^8.0.0",
"vue": "^2.5.17",
"vue-loader": "^15.9.5",
"vue-template-compiler": "^2.6.10",
"vuetify": "^2.4.3",
"vuetify-loader": "^1.7.1",
}
// webpack.mix.js
const mix = require('laravel-mix');
const webpack = require('./webpack.config');
Mix.listen('configReady', webpackConfig => {
// scss
const scssRule = webpackConfig.module.rules.find(
rule =>
String(rule.test) ===
String(/\.scss$/)
);
scssRule.oneOf.forEach(o => {
const scssOptions = o.use.find(l => l.loader === 'sass-loader').options
scssOptions.prependData = '#import "./resources/sass/_variables.scss";'
})
// sass
const sassRule = webpackConfig.module.rules.find(
rule =>
String(rule.test) ===
String(/\.sass$/)
);
sassRule.oneOf.forEach(o => {
const scssOptions = o.use.find(l => l.loader === 'sass-loader').options
scssOptions.prependData = '#import "./resources/sass/_variables.scss"'
})
})
mix.js('resources/js/app.js', 'public/js')
.js('resources/js/gift.js', 'public/js')
.vue()
.sass('resources/sass/pages/home.scss', 'public/css')
.sass('resources/sass/pages/gift.scss', 'public/css')
.webpackConfig(Object.assign(webpack))
.copyDirectory('resources/images/', 'public/images');
if (mix.inProduction()) {
mix.version();
};
// webpack.config.js
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
module.exports = {
plugins: [
new VuetifyLoaderPlugin(),
]
};
did you ever work this out? I'm in the same situation but Veutify is production version 2 (out of beta now).
This solution worked for me correctly, but you must have sass-loader 7, 8 is not compatible.

Resources