Why does it suggest avoiding daisyUI or other component libraries?

The skill encourages building custom components to ensure a unique, world-class design and to keep the bundle size minimal by only including the CSS you actually need.

Does this skill support Tailwind CSS v3?

This skill is specifically optimized for Tailwind CSS v4's new engine, which uses a CSS-first configuration rather than a JavaScript-based config file.

How does it handle Phoenix asset bundling?

It enforces standard app.js and app.css patterns, preventing external script fragmentation and ensuring all dependencies are properly bundled within the Phoenix pipeline.

Does it include accessibility features?

Yes, it prioritizes WCAG contrast ratios, motion-reduction variants, and semantic layouts to ensure interfaces are inclusive and accessible.

Tailwind CSS v4 for Elixir Phoenix

Name: Tailwind CSS v4 for Elixir Phoenix
Author: code0100fun

bycode0100fun

0•

设计工具

Implements high-performance Tailwind CSS v4 configurations and world-class UI/UX principles for Elixir Phoenix applications.

This skill streamlines the integration of Tailwind CSS v4 into Phoenix Framework projects, ensuring adherence to the latest v4 engine requirements such as the new CSS-first configuration and specific import syntaxes. It guides developers in building bespoke, responsive interfaces without relying on bloated UI libraries, emphasizing micro-interactions, accessibility, and modern design principles. This is ideal for developers wanting to maintain a clean, performant asset pipeline while delivering premium, custom user experiences within the Elixir ecosystem.

主要功能

01Bespoke UI component development without third-party dependencies

02Performance-focused asset bundling for Phoenix apps

03Tailwind CSS v4 CSS-first configuration management

04Mobile-first responsive design and accessibility optimization

05Advanced UI/UX principles including micro-interactions and dark mode

060 GitHub stars

使用场景

01Modernizing a Phoenix application's frontend to Tailwind CSS v4

02Optimizing asset pipelines and bundling for Elixir web projects

03Designing custom, high-performance UI components from scratch

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add code0100fun/botfiles tailwind-v4

For use in Claude.ai and ChatGPT

Download Skill