skills.rest
kaxuna1
kaxuna1COMMUNITY
Explore all skills by this author →
GitHub

tailwind

Apply Tailwind utilities with runtime CSS variables for Luxia storefront theming.

Updated Oct 28, 2025
Search Tags:#frontend#react#tailwind#css-variables#design-tokens#theme-system#tailwind-config
One-click install
npx skills add https://github.com/kaxuna1/ecomsite --skill tailwind-kaxuna1
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind
Source: https://github.com/kaxuna1/ecomsite/tree/main/.claude/skills/tailwind
Command: npx skills add https://github.com/kaxuna1/ecomsite --skill tailwind-kaxuna1

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Luxia's frontend styling relies on Tailwind utilities while running a dynamic theme system that injects CSS variables at runtime. This combination lets admins alter themes without redeploying while keeping design tokens and utilities in sync.

Core Features & Use Cases

  • Theme-aware styling: Use Tailwind utilities alongside runtime CSS variables to produce theme-consistent components.
  • Design token integration: Seamlessly apply design tokens for brand colors, typography, and spacing in both storefront and admin UI.
  • Use Case: Build a product card that automatically adapts to admin-configured themes without code changes.

Quick Start

Install and configure Tailwind alongside Theme CSS, wire ThemeContext, and use CSS variables in components to switch themes at runtime.

Frequently Asked Questions about tailwind

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

FAQPage Schema
How do I style React components with Tailwind using runtime CSS variables?▼

Style React components with Tailwind and runtime CSS variables by blending utility classes with a ThemeContext that injects design tokens, enabling theme-aware UI without redeploying code.

What is the best way to build a theme-aware product card that adapts to admin-configured themes?▼

Building a theme-aware product card involves using Tailwind utilities mapped to runtime CSS variables, allowing the component to automatically adapt to admin-configured themes without code changes.

Do I need a tailwind.config.ts and postcss setup to enable dynamic theming?▼

Yes, enabling dynamic theming requires a Tailwind setup including tailwind.config.ts and postcss, alongside a ThemeContext and a theming CSS file to expose var(--color-*) utilities.

Can I use this Tailwind theming approach for both storefront and admin UI?▼

Yes, this Tailwind theming approach targets React-based frontend components across both storefront and admin UI, applying design tokens for brand colors, typography, and spacing at runtime.

How does a ThemeContext inject design tokens into Tailwind utilities?▼

A ThemeContext injects design tokens into Tailwind utilities by mapping runtime CSS variables from a theme.css file to utility classes, syncing dynamic admin theme alterations with the frontend styling.

Why use runtime CSS variables instead of static Tailwind config for design tokens?▼

Runtime CSS variables are used instead of static Tailwind config to let admins alter themes without redeploying, keeping design tokens and utility classes dynamically in sync at runtime.

Related Skills

Explore More Software Engineering Skills→
mauroviverosmauroviveros

tailwind-v4-shadcn

Configure Tailwind v4 and shadcn/ui for React projects with Vite.

Community
Advanced
kaxuna1kaxuna1

frontend-design

Style React components with Tailwind utility classes and design tokens.

Community
Basic
GovTechSGGovTechSG
18

tailwind-mapping

Map SGDS CSS variables to Tailwind v4 utility classes with playground and Storybook documentation.

Official
Intermediate
rodydavisrodydavis
58

material-3-to-material-2-theme-adapter

Map Material Design 3 color tokens to Material Design 2 theme variables via CSS overrides.

Community
Basic