Tech watch

Tailwind CSS

Utility styles and interface composition with Tailwind CSS.

29 Oct 2026Article

MicroKit: 54 React, CSS and Tailwind microinteractions to copy

MicroKit UI graphic on a black background, showing the text “Microinteractions worth copying” beside concentric orange rounded squares.

MicroKit collects copy-ready interactions—animated buttons, tabs, inputs and hover effects—with React or CSS and Tailwind variants. Each component is copied separately in JavaScript or TypeScript, with no package to install; 26 of the 54 have no dependencies, while 28 use lucide-react.

The code is MIT-licensed, and Tailwind variants are designed for versions 3 and 4. In the Next.js App Router, most components work in server components; those using state, refs or event handlers need « use client ».

Animation React CSS Tailwind CSS UI/UX

Henrique BaroneFound via Frontend Focus

28 Oct 2026Article

Tailwind CSS: a directory of components, templates, and tools

allutilitycss.comPermalink

All UtilityCSS graphic showing the site name and its catalog of Tailwind CSS templates, components, and tools.

All UtilityCSS brings together free and paid Tailwind CSS resources, organized by type, use case, and technology. Its listings include copy-paste components, templates, Next.js starters, and color-management tools, several of which support Tailwind CSS v4’s OKLCH formats.

Filters help narrow the catalog to building blocks for a project, but the directory alone does not guarantee their quality or accessibility. The page advises checking those details with each resource.

Tailwind CSS UI/UX Developer Experience

11 Jul 2026Release

ESLint Plugin Tailwind CSS v4 release

github.comPermalink

This release adds Tailwind CSS v4 compatibility to the ESLint plugin. Its notes outline changes that help keep class checks aligned after upgrading.

ESLint Tailwind CSS

18 Apr 2026Tool

Copy animated React and Tailwind CSS components with Animata

animata.designPermalink

Animata offers animated components to copy into React or Next.js applications using Tailwind CSS. Its open-source format lets teams inspect and adapt the code to their interface.

Animation Tailwind CSS React

codse

26 Mar 2026Repository

Use CSS `clamp()` through Tailwind Clamp

github.comPermalink

Tailwind Clamp exposes CSS clamp() values as utility classes. The plugin helps create fluid size or spacing scales without multiplying breakpoints.

Tailwind CSS CSS Fluid typography Responsive design

26 Mar 2026Repository

Build fluid interfaces with Fluid Tailwind CSS

github.comPermalink

This plugin adds Tailwind CSS classes for fluid values across viewport sizes. It keeps responsive typography and spacing adjustments within the project’s utility-class vocabulary.

Tailwind CSS CSS Fluid typography Responsive design

15 Mar 2026Article

Expand a control’s hit area with Tailwind CSS

bazza.devPermalink

This example collects Tailwind CSS utilities that enlarge an element’s interactive area without changing its appearance. The technique makes controls easier to tap, especially on mobile.

Tailwind CSS Accessibility CSS

Kian Bazza

19 Oct 2025Documentation

Skeleton: organize themes and components around Tailwind

skeleton.devPermalink

Skeleton adds a theme system and Zag.js-based components to Tailwind. The documentation presents shared design foundations for frameworks including Svelte and React.

Design Systems Tailwind CSS UI/UX

7 Oct 2025Tool

Sera UI: customizable React and Next.js components

seraui.comPermalink

Sera UI collects JSX components and interface blocks styled with Tailwind CSS. The collection provides customizable foundations for forms, dashboards and web pages.

React Tailwind CSS UI/UX

Sera UI Team

18 Jun 2025Repository

Animate UI: install and customize animated components

github.comPermalink

Animate UI distributes React components built with TypeScript, Tailwind CSS and Motion. Components can be installed through the shadcn CLI and customized within a project.

Animation React Tailwind CSS Motion shadcn/ui

29 Jan 2025Repository

Onlook: visually edit a Next.js and Tailwind interface

github.comPermalink

Onlook provides a visual editor that works against application code. The repository demonstrates browser-based page and style editing with AI assistance.

Next.js Tailwind CSS UI/UX No-code / low-code

13 Oct 2024Tool

Uiverse: explore reusable interface elements

uiverse.ioPermalink

Uiverse collects community-built interface elements with HTML/CSS, Tailwind or React code. It offers examples for studying visual treatments and adapting components to a project.

CSS Tailwind CSS React UI/UX

8 Jan 2024Tool

Inline Fold: reduce visual noise in VS Code markup

marketplace.visualstudio.comPermalink

Inline Fold temporarily collapses portions of a single line, including long Tailwind attribute values. Both the matching patterns and displayed mask can be configured.

Tailwind CSS Developer Experience

16 Oct 2023Tool

TW Classed: compose Tailwind component variants

tw-classed.vercel.appPermalink

TW Classed defines reusable components with typed variants and extensible styles. Compound variants reduce repeated class combinations across application views.

Tailwind CSS React Design Systems