How Tailwind works and integrate JIT: A big improvement on the productivity at development.

What is Tailwind

Tailwind is a utility CSS framework, that instead of define classes with prebuilt styles you’ll be able to add the css properties as a class. For example, ‘mt-10’ to define margin top with the existing values on tailwind. It’s also known that the principle of this framework is mobile first, is designed to be responsive so we can build the desktop, tablet and mobile version of a project.

Tailwind has one of the easiest learning curve and is highly recommended if you just started the journey of web development.

Tailwind Plugins

Currently Tailwind is on their version 3.0 built by their own development community as an Open Source project everyone can collaborate. But sometimes we need prebuilt components, and we also want to customize it.

Tailwind offers some plugins such as:

• Tailwind CSS Typography: This plugin provides a set of prose  classes you can use to add beautiful typographic defaults to any vanilla HTML.
• Tailwind CSS Forms: A plugin that provides a basic reset for form styles that makes form elements easy to override with utilities.
• Tailwind CSS Aspect ratio: This plugin provides a composable API for giving elements a fixed aspect ratio.

Headless UI: Component library

Headless UI is a project build by Tailwind Labs, it includes completely unstyled and fully accessible UI components, designed to integrate beautifully with Tailwind CSS. Compatible for implementing with React js or Vue js.

Some examples of this library components:

• Menu ( Dropdown)
• Switch (Toggle)
• Listbox (Select)
• RadioGroup

JIT (Just in Time) compiler

The Just-In-Time (JIT) compiler is a component of the runtime environment that improves the performance of applications by compiling bytecodes to native machine code at run time.

The JIT compiler is enabled by default. When a method has been compiled, the JVM calls the compiled code of that method directly instead of interpreting it. Theoretically, if compilation did not require processor time and memory usage.

The way this is implemented on the 3.0 version of tailwind CSS allows us to watch on real time the changes on our CSS styles. It also allow us to use arbitrary values on our project in case we wanted to build our own Design system.

But, how this improves our productivity?

The key of develop a better product is have enough time to take care of the details, If we have the tools to work faster with a CSS framework that allows us to watch changes on real time, Frontend developers will have more time to focus on customizing how the product looks and developing a high quality software. This can increase our productivity levels cause we can focus on other important things at the same time that we create.