![]() If you want Tailwind to rebuild the CSS completely from scratch while in watch mode, saving your file or your CSS input file will invalidate all of the caches and trigger a fresh rebuild. For most modern tools (like Next.js for example), this sort of thing happens automatically because your compiled CSS is never committed to version control anyways. We recommend you always compile your CSS in a separate one-off build before deploying to production so that you can minify the output. This isn’t a bug and is rather a deliberate performance optimization that drastically increases the speed of incremental rebuilds, especially in large projects. When the JIT engine is running in watch mode, you might notice that when you add a class to your HTML then remove it, that the class is still present in your CSS. Troubleshooting Styles aren't removed when classes are deleted If you run into any other issues or find any bugs, please open an issue so we can fix it. We are also still ironing out some compatibility issues with certain build tools, which you can follow in our issue tracker. You can’t currently arbitrary CSS classes that aren’t defined within a rule, although we may add support for this in the future. You can only classes that are part of core, generated by plugins, or defined within a rule.Because we don’t generate class names in advance, we can only pass the utility “namespace” to custom prefix functions. The prefix option cannot detect complete class names when configured as a function.It’s not possible to safelist a regular expression, because there is not a pre-generated list of class names to match against that regular expression. Because no CSS is generated by default, the safelist has to be a list of complete class names. The safelist option does not support regular expressions.This new engine supports almost every feature that exists in the classic engine, plus tons of new features that wouldn’t be possible if everything had to be pre-generated up front.ĭue to the nature of how the engine works however, there are a few things that aren’t currently possible: If you were using screens before, you should update your code to use variants: ![]() By default, they are always injected at the very end of your stylesheet. This directive is optional (just like screens always has been) and is only useful if you want explicit control over where utility variants are injected. In the JIT engine, variants are injected at the variants directive, which has been renamed from screens. ![]() In the classic engine, all utility variants are injected as part of the utilities directive. Stacked variants let you specify how something should be styled when multiple variants are active at the same time, so instead of trying to override focus styles with hover styles, you explicitly declare what an element should look like when both hover and focus are active simultaneously. To enable just-in-time mode, set the mode option to 'jit' in your file: To see it in action, watch our announcement video. In projects with heavily extended configurations this makes dev tools a lot more responsive. Since development builds are as small as production builds, the browser doesn’t have to parse and manage multiple megabytes of pre-generated CSS.
0 Comments
Leave a Reply. |