centreklion.blogg.se - Tiny rails engine styles

Tiny rails engine styles update#

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.

Better browser performance in development.

Never worry about accidentally purging an important style in production again. Since styles are generated as they are needed, you don’t need to purge unused styles for production, which means you see the exact same CSS in all environments.

Your CSS is identical in development and production.

Ever needed some ultra-specific value that wasn’t part of your design system, like top: -113px for a quirky background image? Since styles are generated on demand, you can just generate a utility for this as needed using square bracket notation like top. Generate arbitrary styles without writing custom CSS.You can even stack them like sm:hover:active:disabled:opacity-75. Since this library generates styles on demand, you can use any variant you want, whenever you want. Variants like focus-visible, active, disabled, and others are not normally enabled by default due to file-size considerations. Every variant is enabled out of the box.This library can compile even the biggest projects in about 800ms (with incremental rebuilds as fast as 3ms), no matter what build tool you’re using. Tailwind can take 3–8s to initially compile using our CLI, and upwards of 30–45s in webpack projects because webpack struggles with large CSS files.