Level 42
Could we see your tailwind.config.js file ? What version of tailwind are you using ?
I recommend you to checkout the Tailwind installation guide for Laravel.
Jan 24, 2022
13
Level 10
Webpack with PostCss npm run watch question
Hi All, I am currently using Laravel mix for my JS along with Postcss for tailwind. When I use npm run watch it works great unless I am adding a tailwind class that hasn't been loaded before (like w-[90vw] or any other custom tailwind value. Then I have to stop NPM run watch and rerun it (I'm guessing this causes postCss to run again?). This definitely slows down the process and I was wondering if there was any solution to have postCss always checking along with Laravel mix? Here is my webpack file.
const mix = require('laravel-mix');
mix.postCss("resources/css/app.css", "public/assets", [
require("tailwindcss"),
]);
mix.sass('resources/sass/app-create.scss', 'public/assets')
.sass('resources/sass/app-admin.scss', 'public/assets')
.sass('resources/sass/app-lite.scss', 'public/assets')
.js('resources/js/app.js', 'public/assets')
.extract(['vue'])
.webpackConfig({
output: {
chunkFilename: '[name].js?id=[chunkhash]',
}
})
.vue();
if (mix.inProduction()) {
mix.version();
}
Level 10
@NicolasMica Here is my tailwind.config.js file and its v 3 tailwind
module.exports = {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],
theme: {
extend: {
spacing: {
'128': '32rem',
},
boxShadow: {
'custom-1': '0 2px 16px rgb(0 0 0 / 12%)',
'custom-2': '0 1px 7px rgb(0 0 0 / 50%)',
'custom-3': '0 1px 2px rgb(0 0 0 / 8%), 0 4px 12px rgb(0 0 0 / 5%)',
'custom-4': '0 2px 0 0 rgb(0 0 0 / 10%), 0 0 0 0.5px rgb(0 0 0 / 4%)',
},
colors: {
'button-red-1': '#e61e4d',
'button-red-2': '#e31c5f',
'button-red-3': '#d70466',
},
borderRadius: {
'4xl': '2rem',
'5xl': '2.5rem',
'6xl': '3rem',
}
}
},
plugins: [],
}
and I followed that install.
Level 42
Here are some ideas:
- Make sure your
package.jsonreferences Tailwind version 3 - Try using
npm run watch-pollinstead - Use the
mixhelper in your views
<link href="{{ mix('assets/app.css') }}" rel="stylesheet">
Level 10
Hmm I tried watch-poll but nothing changed. If I do something like w-[33rem] it doesn't add it unless I cancel watch-poll and then rerun it. I am using mix helper and package.json references 3
1 like
Level 102
Make a change and have the watch command on screen. See if it does anything when you save the blade file. It should recompile
Level 10
Hi @sinnbeck So I am using vue components inside my blade files to do all the of styling but just as a test I tried adding a new div in my blade file with a class of
<div class="w-[102rem]">
test
</div>
when I saved the blade file nothing actually changed on the watch command screen and the div didn't get the new size. If I rerun npm run watch it then does add the custom class.
If I go into my vue component and add
<div class="w-[204rem]">
test
</div>
it does update on the watch command screen but when I look at the browser I can see in the inspector but it doesn't correspond to any class. If I then cancel npm run watch and then rerun it I can now see a corresponding class for
.w-\[204rem\] {
width: 204rem;
Level 102
Can you try adding this to mix? https://laravel-mix.com/extensions/tailwind
Level 10
@sinnbeck I changed it to the laravel mix extension and sadly its still not calculating the z-[25rem] unless I re-run npm run watch again. Though now that I am using the tailwind extension I can make a bug report to the git so that is good!
Level 1
@chrisgrim I have same issue, have you solved it?? Very annoying
Level 10
Hi @limewater23 I did solve it! My issue was that I wasn't using the latest laravel-mix.
Please or to participate in this conversation.