Tailwind CSS · Utilities reference · all subjects

build process & configuration

21 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Lightning CSS integration in Tailwind

Lightning CSS is being integrated into Tailwind CSS to serve as an all-in-one CSS processing tool. It is written in Rust and makes it extremely fast. Lightning CSS handles importing other CSS files, nesting, vendor prefixes, and syntax transforms for future CSS features without the need to install or configure additional tooling like autoprefixer or postcss-import.

Oxide improvements arriving in Tailwind CSS v3.4

Many Oxide improvements including Lightning CSS integration and the Rust-based template parser will be available in Tailwind CSS v3.4 within a couple of months. All improvements are planned to be introduced without any breaking changes.

CSS-based configuration exploration in Tailwind

Tailwind is exploring CSS-based configuration that would allow configuring Tailwind directly in the CSS file instead of in JavaScript. Combined with automatic content detection and simplified import, custom colors and fonts could be configured using @import statements and a :theme block with CSS custom properties. Example syntax includes @import "tailwindcss", @import of font layers, and :theme block defining variables like --colors-neon-pink, --colors-neon-lime, --colors-neon-cyan, --font-family-sans, and --font-family-display.

Oxide configuration features: automatic content detection and simplified import

Oxide brings simplified configuration experience to Tailwind CSS. It includes automatic content detection so developers no longer need to configure paths to template files. The import story is simplified by replacing all @tailwind directives with a single @import "tailwindcss" call at the top of the CSS file.

Tailwind UI example authoring internal format dropdown example

Example of Tailwind UI internal authoring format for a dropdown: <x-menu as="div" id="options-menu" class="relative inline-block text-left"><div><x-menu-button class="inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-100 focus:outline-none">Options<x-heroicon type="solid" name="chevron-down" class="-mr-1 ml-2 h-5 w-5" /></x-menu-button></div><x-transition as="x-fragment" enter="transition ease-out duration-100" enter-start="transform opacity-0 scale-95" enter-end="transform opacity-100 scale-100" leave="transition ease-in duration-75" leave-start="transform opacity-100 scale-100" leave-end="transform opacity-0 scale-95"><x-menu-items class="ring-opacity-5 absolute right-0 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black focus:outline-none"><div class="py-1"><x-menu-item><a href="#" class="block px-4 py-2 text-sm" x-active-class="bg-gray-100 text-gray-900" x-not-active-class="text-gray-700">Account settings</a></x-menu-item><x-menu-item><a href="#" class="block px-4 py-2 text-sm" x-active-class="bg-gray-100 text-gray-900" x-not-active-class="text-gray-700">Support</a></x-menu-item><x-menu-item><a href="#" class="block px-4 py-2 text-sm" x-active-class="bg-gray-100 text-gray-900" x-not-active-class="text-gray-700">License</a></x-menu-item></div></x-menu-items></x-transition></x-menu>

Tailwind UI internal authoring format with custom elements

Tailwind UI examples are authored in a custom flavor of HTML with custom elements (prefixed with x-) that are transformed to vanilla HTML using PostHTML. Custom elements include: x-menu, x-menu-button, x-menu-items, x-menu-item, x-transition, x-fragment, x-heroicon. Custom attributes include: x-active-class (classes to apply when active), x-not-active-class (classes when not active). Attributes use kebab-case equivalents: enter-start (enterFrom), enter-end (enterTo), leave-start (leaveFrom), leave-end (leaveTo). This authoring format encodes intent and enables automated conversion to HTML, React, Vue, and Alpine.js preview formats.

JIT PostCSS configuration

To use the @tailwindcss/jit package, install it with npm install -D @tailwindcss/jit tailwindcss postcss autoprefixer, then configure postcss.config.js with @tailwindcss/jit as a plugin before autoprefixer.

Just-in-Time compiler overview

The Just-in-Time compiler for Tailwind CSS compiles CSS on-demand as template files are authored, instead of generating the entire stylesheet up front. As of Tailwind CSS v2.1, the JIT engine is included in Tailwind CSS itself and no longer requires the separate @tailwindcss/jit package.

JIT compiler build time performance

The JIT compiler can compile even the biggest projects in about 800ms with incremental rebuilds as fast as 3ms, compared to 3–8 seconds for the initial Tailwind CLI compilation and upwards of 30–45 seconds in webpack projects.

JIT eliminates need for production CSS purging

With the JIT compiler, CSS is generated as it is needed, so you do not need to purge unused styles for production. The CSS is identical in development and production environments.

Development CSS file size reduction with JIT

Development builds with the JIT compiler are as small as production builds, eliminating the need to parse and manage multiple megabytes of pre-generated CSS. This improves browser performance and responsiveness in dev tools.

Original problem with generated CSS file size

Before the JIT compiler, generated CSS in development could reach 10mb or more with sufficient customizations to the config file, creating constraints on expensive config changes like adding extra breakpoints or enabling extra variants.

Utilities sorting within same layer

Within utilities, classes are sorted in the same order as they appear in the CSS. Classes that override other classes always appear later in the class list. For example, pt-2 should come after p-4 because pt-2 overrides the top padding set by p-4.

Class sorting order: layers first

Classes are sorted in the same order as they appear in Tailwind's CSS output. Classes in the base layer are sorted first, followed by classes in the components layer, and finally classes in the utilities layer.

Installation of prettier-plugin-tailwindcss

Install prettier-plugin-tailwindcss as a dev-dependency using: npm install -D prettier prettier-plugin-tailwindcss. Then add it to a Prettier configuration file (.prettierrc) by adding "prettier-plugin-tailwindcss" to the plugins array. The plugin can also be loaded via the --plugin flag with the Prettier CLI or using the plugins option with the Prettier API.

Prettier plugin for Tailwind CSS class sorting

An official Prettier plugin called prettier-plugin-tailwindcss automatically sorts Tailwind CSS utility classes in class attributes. The plugin scans templates for class attributes containing Tailwind CSS classes and sorts them following Tailwind's recommended class order. It works seamlessly with custom Tailwind configurations and works anywhere Prettier works, including all popular editors and IDEs.

Custom non-Tailwind classes sorting

Custom classes that do not come from Tailwind plugins are always sorted to the front of the class list, making it easy to see when an element is using third-party library classes.

Sort order cannot be customized

The prettier-plugin-tailwindcss will respect your tailwind.config.js file and work with any installed Tailwind plugins, but there is no way to change the sort order. The plugin maintains an opinionated sort order following Prettier's philosophy of minimal customization.

Responsive modifiers sorting

Responsive modifiers like md: and lg: are grouped together at the end of the class list in the same order they are configured in the theme, which is smallest to largest by default. For example, grid-cols-2 appears before sm:grid-cols-3 which appears before lg:grid-cols-4.

State modifiers sorting

State modifiers like hover: and focus: are grouped together and sorted after any plain utilities. For example, scale-125 and opacity-50 appear before hover:scale-150 and hover:opacity-75.

Utility sorting based on box model and impact

Utilities are sorted loosely based on the box model. High-impact layout classes appear at the beginning, decorative classes appear at the end, and related utilities are kept together. This ordering aims to put the most important information first.

Give your agent this brain