coming back for tailwind issue again

hi guys, posted a thread yesterday about installing tailwind, thanks to johnDoe220 who gave me some hint, but the issue with tailwind is still there. i followed tailwind doc and laravel doc to install tailwind. when i run npm run dev / npm run prod / npm run watch, the Mix never hit 100% complete, it can be 37%, 90% 95%, even 99%, but never reach 100%, and the result is that the compiled /css/app.css file does not contain some tailwind classes, this has been a pain in my neck for the whole day.

when switching back to tailwind CDN link , everything is fine. node and npm are the latest version as well as postcss, autoprefixer. is it a problem of Mix or tailwind, or any setting that i messed up?

here are the code for the installaion

in my tailwind.config.js

module.exports = {
  content: [
      './storage/framework/views/*.php',
      './resources/**/*.blade.php',
      './resources/**/*.js',
      './resources/**/*.vue',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

in my webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('tailwindcss')
        //
    ]);

in my resources/css/app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

finally in my public/css/app.css (missing values, and the final compile contains 1325 lines of code , not sure if this is the whole contents of compilation, guess not)

--tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;

MohamedTammam

4 years ago

Level 51

Sometime Laravel mix shows 99% when it's actually completed.

You shouldn't see all tailwind classes because it's using JIT compiler which means you should only see that classes that you used.

leecoding

4 years ago

Level 5

@MohamedTammam thanks for your reply, if Mix complete percentage is not the issue, what confuses me is that when i apply certain tailwind class i.e bg-lime-500 or justify-evenly, i could not see the immediate resulte. and the compiled file /public/css/app.css is underlined in red color which shows it contains errors.

Niush

4 years ago

Level 50

When you run dev or prod build with npm, Tailwind will use JIT engine to only include classes that you used in files provided in content array. If you try changing classes from Browser Devtools, they might not exist in the compiled css file, and won't work.

So, instead there are other solutions for local development:

Use npm run watch to keep watching for changes and rebuild css when you change your code.
Or, Insert Tailwind CDN (or Downloaded File), in local environment head tag

@if(app()->environment("local")) ..cdn link.. @endif

With this, you can use any tailwind classes in devtools locally.

Or there also is a Paid Devtools Extension by BeyondCode. https://devtoolsfortailwind.com/

This is just a side-effect of JIT engine.

The error underline in css file is probably some minor warning by IDE or Editor.

leecoding

4 years ago

Level 5

@Niush thank for your reply. I have looked around, it is the JIT side-effect. i will stick to CDN for my local env.

Please or to participate in this conversation.