skills.rest
reeinharddd
reeinhardddCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

tailwind

Apply Tailwind CSS v4 styling rules and brand guidelines to frontend components.

Updated Aug 27, 2026
Search Tags:#ui#frontend#design system#css#styling#tailwind
One-click install
npx skills add https://github.com/reeinharddd/impulsa-monorepo --skill tailwind-reeinharddd
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind
Source: https://github.com/reeinharddd/impulsa-monorepo/tree/main/.github/skills/tailwind
Command: npx skills add https://github.com/reeinharddd/impulsa-monorepo --skill tailwind-reeinharddd

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill ensures consistent application of Tailwind CSS v4 styling and adherence to brand guidelines across frontend components.

Core Features & Use Cases

  • Consistent Styling: Apply predefined brand colors, component patterns (buttons, cards, inputs), and spacing rules.
  • Enforces Best Practices: Prevents the use of inline styles and promotes class binding for dynamic styling.
  • Use Case: When developing a new button component, use this Skill to apply the correct bg-brand-primary class, rounded-xl for shape, and font-medium for typography, ensuring it matches the project's design system.

Quick Start

Apply the 'bg-brand-primary' and 'text-white' classes to a button element.

Frequently Asked Questions about tailwind

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

FAQPage Schema
How do I apply consistent brand colors and spacing in Tailwind CSS v4?▼

To apply consistent styling in Tailwind CSS v4, use predefined brand color classes like `bg-brand-primary`, component patterns for buttons and cards, and standard spacing conventions instead of inline styles.

What is the best way to enforce responsive design principles in a frontend design system?▼

Enforcing responsive design principles in a frontend design system involves applying predefined Tailwind CSS v4 rules that manage visual consistency and prohibit inline styles or object-based ngClass and ngStyle.

Can I use inline styles for dynamic styling with Tailwind CSS v4?▼

No, you cannot use inline styles for dynamic styling with Tailwind CSS v4 under these rules; the system enforces best practices by prohibiting inline styles and promoting class binding instead.

How do I style a new button component to match an existing design system?▼

To style a new button component, apply predefined Tailwind classes such as `bg-brand-primary` for color, `rounded-xl` for shape, and `font-medium` for typography to match the project design system.

Does this styling approach work with object-based ngClass or ngStyle?▼

No, this styling approach does not work with object-based ngClass or ngStyle; it explicitly enforces class binding for dynamic styling and prohibits object-based style binding.

Related Skills

Explore More Design & Creative Skills→
algusaemalgusaem

tailwind-design-system

Build Tailwind CSS design systems with semantic tokens and CVA-based components.

Community
Intermediate
hffmnnjhffmnnj
39

ui-design

Design responsive, accessible UI layouts for web and mobile platforms.

Community
Basic
zakad00e2zakad00e2

design-taste-brutalism

Generate brutalist UI/UX designs with adjustable variance, motion, and density.

Community
Advanced
baasith6baasith6

converting-css-to-tailwind

Convert CSS selectors, properties, and rules to Tailwind CSS utility classes.

Community
Intermediate