skills.rest
code0100fun
code0100funCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

tailwind-v4

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

1|1|Updated Feb 8, 2026
Search Tags:#design#ui#frontend#css#tailwind#ux#phoenix
One-click install
npx skills add https://github.com/code0100fun/botfiles --skill tailwind-v4-code0100fun
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-v4
Source: https://github.com/code0100fun/botfiles/tree/main/plugins/elixir-phoenix/skills/tailwind-v4
Command: npx skills add https://github.com/code0100fun/botfiles --skill tailwind-v4-code0100fun

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Tailwind v4 configuration for Phoenix projects can be confusing due to new import syntax, bundling constraints, and UI/UX considerations. This guide consolidates configuration, design principles, and best practices to deliver consistent, high-quality interfaces.

Core Features & Use Cases

  • Tailwind v4 Configuration: Explains the new import syntax in app.css and the removal of tailwind.config.js, guiding correct project setup.
  • Asset Bundling & Performance: States that only app.js and app.css are bundled, and advises against external vendor scripts and inline tags.
  • UI/UX Design Principles: Provides guidance on typography, spacing, color, motion, dark mode, and accessibility to build premium interfaces.
  • Best Practices: Covers responsive design, theming, typography, and accessible design standards.

Quick Start

Apply Tailwind v4 import syntax in your Phoenix app.css to start building components with Tailwind classes.

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 CSS v4 in a Phoenix project?▼

Configure Tailwind CSS v4 in Phoenix by using the explicit import syntax in your app.css file. This setup removes the need for a tailwind.config.js file entirely.

Why does my Tailwind v4 setup require removing tailwind.config.js?▼

Tailwind v4 introduces a new import syntax in app.css that replaces the old configuration file. Removing tailwind.config.js is required to properly establish Tailwind v4 setup in Phoenix projects.

Does Phoenix asset bundling support external vendor scripts for Tailwind?▼

Phoenix asset bundling only includes app.js and app.css. You should avoid external vendor scripts and inline tags to ensure your Tailwind configuration meets bundling constraints and performs optimally.

What's the best way to implement responsive and accessible design with Tailwind v4?▼

The best way to implement responsive and accessible design is by following UI/UX best practices for typography, spacing, color, motion, and dark mode outlined in the Tailwind v4 guidelines.

What UI/UX design principles should I apply when using Tailwind in Phoenix apps?▼

Apply UI/UX design principles covering typography, spacing, color, motion, dark mode, and accessibility. These guidelines help build premium, coherent interfaces in Phoenix applications.

Related Skills

Explore More Software Engineering Skills→
agusmdevagusmdev
5

tanstack-shadcn-setup

Configure Tailwind CSS v4 and shadcn/ui for TanStack Start and Router projects.

Community
Advanced
locdinh209locdinh209

ui-styling

Design accessible responsive interfaces with shadcn/ui, Tailwind CSS, and canvas.

Community
Advanced
gurujadagurujada
46

sutra-ui

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

Official
Advanced
amit397amit397

tailwind-design-system

Build design systems with Tailwind CSS v4 using CSS-first configuration.

Community
Advanced