Laravel Tailwind CSS - generate all classes depends on ENV

Question

I just jump to laravel 9 recently (from few months ago), kinda wondering about,

Is it possible to generate all css classes (including custom classes), BUT, only when APP_ENV on .env is not production?
I tried to overcome No.1 (see below explanation), by using const APP_ENV = import.meta.env.VITE_APP_ENV; on tailwind.config.js - so I can do if - else thing, to load things, but it produce an error - offset is longer than source length! offset 81 > length 59. Is it possible to get .env variables on tailwind.config.js?
As I tried to find another way for No.2. I'm narrowing my objective on No.1 and No.2, so, I tried to load all possibilities of my "custom classes" only on dev. By using safelist - to generate all my-own custom class, but it seems not working well, since, the custom class that I want to add doesn't added. I'm using this - pattern: /./ - since I saw this article says so (please, correct me if I'm wrong), but, it's indeed "hitting" all other classes, not just my custom classes. I want to add all of my "custom css class" without adding the variants one-by-one. Maybe something like variants: *? (I already check around on tailwind docs, but couldn't found something like that)

I tried a proper way, to just load all my custom classes like pattern: /ctm/, but as stated on tailwind documentation

Patterns can only match against base utility names like /bg-red-.+/, and won’t match if the pattern includes a variant modifier like /hover:bg-red-.+/.

How can I do so, without me typing & guessing all of the possibility of variants?

Explanation how I try to overcome For question No.1 -

I tried using these code on app.js

const APP_ENV = import.meta.env.VITE_APP_ENV;
if (APP_ENV == 'production') {
    //need to use ()
    import ('../css/app.css');
}

and with below code on app.blade.php

@if (config('app.env') != 'production')
            
        @endif

But, when it comes to a custom classes on tailwind.config.js - for example

theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },

            colors: {
                'ctm-dark-purple': '#2a234f', //<--- custom class here
                'ctm-light-dark-purple': '#2a234f', //<--- custom class here
            },
        },
    },

It doesn't generate that custom classes, since I "block" the generated class and swap it into cdn mode on dev.

So, in-summary, how can I "generate all css classes" only on "development" mode? Along with my "custom css class"? If that's not possible, then, is it possible to overcome No.3? I want to add all of my "custom css class" without adding the variants one-by-one. Maybe something like variants: *?

My main reason is simply, I want to apply classes directly on web-browser console and see the changes more faster, rather than back-and-forth modifying-then-save the code on text-editor.

Thanks a lot!

Log - Updating Problem No.3 - since forgot to mention precisely what I want

Laravel Tailwind CSS - generate all classes depends on ENV

0 Answers