Tailwind CSS · Utilities reference · all subjects

component-frameworks

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

Vue, Svelte, and Astro style blocks have same drawbacks as CSS modules

Vue, Svelte, and Astro support <style> blocks in component files that behave very much like CSS modules; they are each processed by build tooling separately and have all of the same drawbacks as CSS modules.

Avoid style blocks in Vue, Svelte, and Astro components with Tailwind

When using Tailwind with Vue, Svelte, and Astro, avoid <style> blocks in your components and style things with utility classes directly in your markup instead, the way Tailwind is meant to be used.

Import global styles as reference in component style blocks

If you do use <style> blocks in Vue, Svelte, or Astro components with Tailwind, import your global styles as reference using @reference if you want features like @apply to work as expected.

Use CSS variables in component style blocks instead of @apply

In Vue, Svelte, or Astro component <style> blocks, use your globally defined CSS variables instead of features like @apply, which don't require Tailwind to process your component CSS at all.

Headless UI components handle ARIA and keyboard interactions

Headless UI is a library developed to decouple JavaScript behavior from styles and markup. It handles ARIA attribute management, keyboard interactions, focus handling, and more automatically, allowing components to be fully functional without writing complex JavaScript code.

Tailwind UI React Switch component example

Example of a fully customizable React Switch component using Headless UI and Tailwind CSS utility classes: ```jsx import { useState } from "react"; import { Switch } from "@headlessui/react"; function classNames(...classes) { return classes.filter(Boolean).join(" "); } export default function Example() { const [enabled, setEnabled] = useState(false); return ( <Switch checked={enabled} onChange={setEnabled} className={classNames( enabled ? "bg-indigo-600" : "bg-gray-200", "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none", )} > <span className="sr-only">Use setting</span> <span aria-hidden="true" className={classNames( enabled ? "translate-x-5" : "translate-x-0", "pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out", )} /> </Switch> ); } ``` This example demonstrates conditional utility classes based on state, focus variants, and responsive design patterns.

Tailwind UI provides customizable component examples

Tailwind UI components can be fully customized by changing any aspect of the design through Tailwind utility classes, including border radius, padding, box shadows, and font size, without modifying the underlying component structure.

Catalyst: new React UI kit for Tailwind CSS

Catalyst is a new batteries-included React UI kit being developed by the Tailwind team since late last year. It is a component system with thoughtfully designed APIs and includes basic building blocks needed to build applications such as buttons, form controls, dialogs, slide-overs, tables, dropdowns, and more. Unlike isolated component examples, Catalyst components are wired together like they would be in a real project.

Catalyst delivery model: copyable code rather than npm package

Catalyst code is delivered as a starting point rather than as an npm package library. Users download the latest version, copy the contents of the /components directory into their project, and then start building. The code is designed to be modifiable—users can change anything, create new components, and over time the codebase becomes their own. Catalyst is positioned as a starting point for building a custom component system rather than a locked-down library.

@tailwindplus/elements library overview

The @tailwindplus/elements library is a collection of headless custom elements built for Tailwind Plus customers. It provides interactive UI components that work without a JavaScript framework. The library can be loaded from CDN using a script tag pointing to https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1 with type='module'.

Elements custom elements list

The @tailwindplus/elements library ships with the following primitives: Autocomplete (for building Comboboxes), Command palette (for building Command Palettes), Dialog (for building Modal Dialogs and Drawers), Disclosure (for building collapsible FAQs and mobile menus), Dropdown menu (for building Dropdowns), Popover (for building Flyout Menus), Select (for building Select Menus), and Tabs (for building custom tabs).

Elements custom element HTML tags

The @tailwindplus/elements library provides custom HTML element tags including el-dropdown, el-menu, el-select, el-selectedcontent, el-options, el-option, el-dialog, el-dialog-backdrop, el-dialog-panel, el-command-palette, el-command-list, el-defaults, el-command-group, el-no-results, el-command-preview, and el-autocomplete.

Elements key attributes and features

Elements custom elements support automatic ARIA attribute management, focus handling, and keyboard support. Key attributes include: anchor attribute (e.g., 'bottom end') for positioning, popover attribute for managing overlays, the command attribute for declaratively managing interactive elements (e.g., command='show-modal'), and the commandfor attribute to link commands to elements (e.g., commandfor='dialog').

Elements form control integration

Elements custom form controls like el-select work like native form controls. They support standard HTML form attributes including name attribute for form submissions, value attribute to set the selected value, and id attribute for labeling. Custom select elements can be included in form submissions and their values are submitted like native form controls.

Elements dropdown example with HTML

Example of building a dropdown menu with Elements: wrap a button and menu in el-dropdown. The button triggers the menu. The menu uses el-menu with anchor="bottom end" and popover attributes, plus Tailwind classes for styling including data-closed:scale-95, data-closed:opacity-0 for closed state transitions, data-enter:duration-100 and data-leave:duration-75 for animation timing. Menu items are standard links or buttons styled with Tailwind classes for focus states.

Elements select menu example with HTML

Example of building a select menu with Elements: use el-select with id, name, and value attributes. Include a button with el-selectedcontent to display the selected value. Use el-options with anchor and popover attributes to wrap el-option elements. Each el-option has a value attribute. The structure supports aria-selected state, group-aria-selected modifier for selected item styling, and group-focus modifier for focus styling.

Elements command palette example with HTML

Example building a command palette with Elements: use el-dialog wrapper with native dialog element inside. Include el-dialog-backdrop for the overlay background with data-closed opacity transitions. Use el-dialog-panel for the panel wrapper with data-closed and data-enter/leave transition classes. Inside use el-command-palette wrapper with el-command-list for results, el-defaults for default results section, el-command-group for grouped results, el-no-results for no-results state, and el-command-preview for preview pane. All elements support data-* selectors for styling different states.

Give your agent this brain