Is there any way to disable JIT in tailwind 3.0

[manhthang2504]

Firstly, congratulation for the 3.0 release.

I understand the great benefit the JIT bring to the table. However, for my case, my workflow are usually try to add, remove, adjust utility classes in Browser Dev tool to see what's best, before coming back to code editor to make that change. With JIT, it cannot be done because I have to make change in code editor first, then the engine compile the new CSS file, then I have to hit Ctrl+F5 (to make sure the browser doesn't load the cached css version) and see the result. I cannot interate with difference options directly in browser dev tool and see the visual result changed immediately, except for those classes that has already been used somewhere in my project.

Is there any way to just make the old-style development version (around 4MB) which contain all the classess for the development stage?

[NovusOpus]

About disabling JIT in tailwind 3.0:
Check @adamwathan reply Here: https://github.com/tailwindlabs/tailwindcss/discussions/6256

Update

If you just want to Try and Play Around with Tailwind CSS without having to install anything locally:

1. Tailwind Play
2. Tailwind Play CDN as @nbgoodall and @sasial-dev Mentioned.

Are good Options.

Also if you want all the benefits of the Local Install(Installing NPM Packages) and using any Front End framework(React, Vue, Next, Nuxt etc) but still in the browser:
3. https://stackblitz.com (*Not related to Tailwind CSS) is another option.

[NovusOpus]

About disabling JIT in tailwind 3.0

Only ways are(at least for now):

1. Go back to v2(But you're going to miss all the new V3 Utilities/Classes.
2. Pattern safelisting

[manhthang2504]

The term "Pattern safelisting" is new to me. I read the PR but have no idea how to use it as user.

Do you have any resource/article/blog post that may help users like me in this? Thank you very much.

[nbgoodall]

@manhthang2504 the Tailwind CDN works perfectly:

Screen.Recording.2021-12-10.at.10.49.20.mov

And you get all the new features… might start doing this myself.

[manhthang2504]

Thank you. It's a great solution.

[codestitch]

@NovusOpus I'm also using tailwind for micro-frontend. Given the microFE structure of separate repo, only one repository has tailwind, and then shared with other applications. W/ tailwind v2 it's grand but not with tailwind3. However, the CDN does the workaround. But if going to production will it still be good to use the CDN, is there an alternative to this?

Thank you.

[sasial-dev]

You could use the tailwind CDN for this!

[sasial-dev]

^^ Just being aware there may be a very slight delay due to the fact it uses a MutationObserver.

[nbgoodall]

You beat me to it^^

[manhthang2504]

You could use the tailwind CDN for this!

Thank you. It's a great solution

[Jeffrey-FLS]

I'm trying to disable as well, Tailwind is not styling on NextJS 12, on my current work enviornment , and I get no errors to notify me what's wrong. Although it did style on a new app

[NeurAlch]

I would also like to have all usual classes for this one, a pre-compiled tailwindcss with the usual: #6555

[ghost-of-kla-trackunit]

Even tho a lot of better solutions have been proposed I wanted to share a hacky way of getting all the css classes.
This will result in a huge css file tho 😁

  safelist: [
    {
      pattern: /.*/,
      variants: [
        "first",
        "last",
        "odd",
        "even",
        "visited",
        "checked",
        "empty",
        "read-only",
        "group-hover",
        "group-focus",
        "focus-within",
        "hover",
        "focus",
        "focus-visible",
        "active",
        "disabled",
      ],
    },
  ],

[JunyWuuuu91]

this's good for me

[alexizzz0]

This is perfect for testing code when you're trying to dev a project that is backend heavy like a laravel project where the front end needs to look clean and elegant but the focus is on the backend PHP. The IDE can now autocomplete those clases and when you are done take it out and let tailwind do its thing. GREAT IDEA.

[red-meadow]

@kla-trackunit , thank you very much for your tip! It's a shame there is no straightforward way to play around with different classes as this was one of the best Tailwind's features.

In order to generate all classes for development only this code can be used:

module.exports = {
  <other_options>

  ...(process.env.NODE_ENV == 'development') && {
    safelist: [
      { pattern: /.*/ },
    ],
  },
}

[mpociot]

You can also check out our Devtools for Tailwind chrome extension, which gives you the full power of JIT right in your devtools
https://devtoolsfortailwind.com

[cxyb]

I'm using tailwind with vite and i'm trying to build my table layout based on some data i'm getting from with data response -> column width (eg- w-1/6) and adding that class programatically on table building className=${column.width}. What is a good solution for this kind of use case? As much as i can see adding tailwind cdn script works for development but that class isn't going to be resolved for production build?

[red-meadow]

A good solution is just using the "style" attribute or a custom CSS class + CSS custom property. There is no need to use Tailwind for such tasks.

[ingageco]

Just want to chime in here - we're using Tailwind for app development, and want everything generated because it's being served locally from the device. That being said, a large TW css file isn't a problem. It allows us to supply styled components via an API for dynamic content.

It would be great if there was a way to just say "generate everything" - and then have an exclusion list from there.

[shmish111]

I also want to chime in, whilst the JIT compiler does allow some cool new features, I think there are plenty of use cases where people would prefer not to purge in dev. I personally have a custom kotlinjs framework that takes quite a long time to restart the server and if I want styles that weren't in there before I have to do a clean build and can't do hot reloading. This makes using tailwind 3 a really bad experience. Thanks to the answer by @kla-trackunit which I think will be plenty good enough for my use case but it seems the tailwind developers do not realise that not everybody is using the popular javascript frameworks. More and more people are using other languages that compile to javascript and different types of frameworks and completely removing purge: false does really make life difficult for plenty of people.

[bstro]

I'm really needing a plain old pre-compiled .css file (like back in the 2.0 days) for my particular usecase.