bwrigley's avatar

Vite and Tailwind, how to build in Chrome?

Hi There,

This is a very cheeky question to ask on Laracasts forum as it's about Tailwind, but I'm using Laravel and Vite so I'm hoping you can help!

I'm very new still to Laravel, Tailwind and Vite, but loving them all so far.

The problem I'm having is that I was using tailwind from a CDN whilst developing a trial site. This meant that in Chrome I could inspect an element and I could apply different tailwind classes to work out what I liked the look of.

Now I'm using Vite and I've installed Tailwind as part of a Breeze install, the classes aren't available in Chrome for me to test out anymore. Is there a way to configure Vite in my dev environment so I can still play with all the classes in Chrome?

Equally, I quite understand that this might be viewed as a horrible way to be designing e.g. in the browser and I'm open to better suggestions!

Thanks for your support.

0 likes
11 replies
Sinnbeck's avatar
Sinnbeck
3 years ago
Best Answer
Level 102

Tailwind 1 worked like thatb(with vite or mix). Version 2 only adds what you are using. Maybe beyondcode has something that can do what you want. They made a few tailwind tools

My own way of working is the page on one screen and react on the other. Vite then magically updates the page on save

Edit : indeed they had exactly that https://devtoolsfortailwind.com/

1 like
bwrigley's avatar

@Sinnbeck ah brilliant thank you!

I haven’t started with react or vue yet, I’m using blade at the moment. Like you, I have two screens. Saving the blade file updates the browser beautifully.

But do you have all the tailwind classes in your head? Or do you have an auto completion tool?

Thanks again!

Sinnbeck's avatar

@bwrigley I use the phpstorm plugin. But I do find it sometimes does not suggest all classes for some reason. But most of the time it works very well. Maybe it works better in blade :)

1 like
bwrigley's avatar

@Sinnbeck thank you! I’ll see if I can have a plug-in for vscode. Intelliphense doesn’t seem to be working for me yet.

Sinnbeck's avatar

@bwrigley oh that's annoying. I hear the tailwind plugin for vscode should be great, but I don't use vscode much myself

bwrigley's avatar

@Sinnbeck apologies for the scope creep, but with your setup, have you experienced any issues with tailwind's responsive breakpoints and Chrome's built-in device tool?

My tailwind.config.js has:

screens:{
        'sm' : '640px',
        'md' : '768px',
        'ls' : '1024px',
        'desktop' : '1280px',
    },

and I've tested a div with

class="invisible md:visible" /// only using visibilty as a clear class to test with

In Chrome's device tool, a 640px wide device is still visible, in fact it stays visible no matter how small I shrink the screen.

However, if I override the sizes:

screens:{
        'sm' : '640px',
        'md' : '1000px',
        'ls' : '1024px',
        'desktop' : '1280px',
    },

Now any screen below 1000px is invisible.

Have you experienced this? And have you found a better tool?

Thanks again!

Sinnbeck's avatar

@bwrigley I use the device tool daily and have never had any such issue. I recommend using the element inpector to see what the exact css is being applied. It might show that your selector is overwritten by something else or similar :)

1 like
bwrigley's avatar

@Sinnbeck I'll investigate more. Again thank you for taking the time. Really appreciate it!

Please or to participate in this conversation.