skills.rest
johngrandson
johngrandsonCOMMUNITY
Explore all skills by this author →
Website𝕏@johngrandsoonGitHub

tailwind-v4

Standardize Tailwind v4 styling in Phoenix projects with app.css import syntax.

Updated Aug 23, 2026
Search Tags:#ui#frontend#css#tailwind#ux#phoenix#tailwind-v4
One-click install
npx skills add https://github.com/johngrandson/orkestry --skill tailwind-v4-johngrandson
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-v4
Source: https://github.com/johngrandson/orkestry/tree/main/.claude/skills/tailwind-v4
Command: npx skills add https://github.com/johngrandson/orkestry --skill tailwind-v4-johngrandson

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Tailwind v4 reduces the friction of styling Phoenix apps by providing a clear configuration approach and design guidelines, enabling teams to ship polished interfaces faster.

Core Features & Use Cases

  • Configuration guidance: Removes the need for tailwind.config.js in v4 and prescribes import syntax in app.css for Phoenix-generated projects.
  • UI/UX Best Practices: Provides typography, spacing, color, and interaction guidance to create consistent, accessible interfaces.
  • Guided workflow: Applies to any Phoenix project requiring a standardized frontend styling layer and predictable asset bundling.

Quick Start

Update your Phoenix project to Tailwind v4 by applying the recommended app.css import syntax and following the UI/UX guidelines to style components.

Frequently Asked Questions about tailwind-v4

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I configure Tailwind v4 in a Phoenix project without tailwind.config.js?▼

Configuring Tailwind v4 in Phoenix involves removing tailwind.config.js and adopting the prescribed import syntax directly within app.css. This standardizes asset bundling and styling across your application's pages.

How do I set up Tailwind v4 app.css imports for Phoenix web apps?▼

Setting up Tailwind v4 imports in Phoenix requires applying the prescribed import pattern within your app.css file. This establishes a standardized frontend styling layer and ensures predictable asset bundling.

Does Tailwind v4 work with Phoenix LiveView and standardize UI accessibility?▼

Yes, Tailwind v4 works with Phoenix to enforce design-first guidelines for typography, spacing, and accessibility. It ensures responsive design and accessible UI are consistently applied across all pages.

What is the best way to style Phoenix interfaces with Tailwind v4?▼

The best way to style Phoenix interfaces with Tailwind v4 is to follow design-first guidelines for typography and spacing while avoiding @apply. This ensures consistent, accessible UI and predictable asset bundling.

Why should I avoid using @apply when integrating Tailwind v4 in Phoenix?▼

You should avoid using @apply when integrating Tailwind v4 in Phoenix to maintain predictable asset bundling and strict design-first guidelines. This constraint ensures consistent typography and spacing across your UI.

Related Skills

Explore More Software Engineering Skills→
gurujadagurujada
46

sutra-ui

Provide Phoenix LiveView UI components and CSS-first theming utilities.

Official
Advanced
rokkayrokkay
1

tailwindcss-development

Applies Tailwind CSS v4 utilities for spacing, color, typography, layout, responsive design, and dark mode across components and layouts.

Community
Intermediate
code0100funcode0100fun
1

tailwind-v4

Configure Tailwind CSS v4 in Phoenix projects using app.css import syntax.

Community
Intermediate
wfvuewfvue
3

tailwindcss

Apply Tailwind CSS v4 utilities with Vite plugin integration for responsive and dark mode styling.

Community
Intermediate