skills.rest
Rational-Partners
Rational-PartnersOFFICIAL
Explore all skills by this author →
GitHub

portal-tailwind

Enforce tw- prefixed Tailwind utilities for portal UI styling.

4|11|Updated May 1, 2025
Search Tags:#frontend#components#tailwind#design-system#bootstrap#portal#tw-prefix
One-click install
npx skills add https://github.com/Rational-Partners/ai-training-practical --skill portal-tailwind
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: portal-tailwind
Source: https://github.com/Rational-Partners/ai-training-practical/tree/main/.claude/skills/portal-tailwind
Command: npx skills add https://github.com/Rational-Partners/ai-training-practical --skill portal-tailwind

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Portal Tailwind styling provides a dedicated Tailwind-based design system for the portal, ensuring portal UI uses tw- prefixed utilities and remains separate from Bootstrap dashboards.

Core Features & Use Cases

  • Enforces tw- prefixed Tailwind utilities for portal UI across frontend/pages/components.
  • Keeps portal styling isolated from Bootstrap dashboard styles to avoid conflicts.
  • Provides design-system guidance (colors, typography, spacing) and common component patterns for portal UI.

Quick Start

Import the portal-tailwind CSS into portal components and apply tw- prefixed classes to style portal UI while keeping Bootstrap styles isolated.

Frequently Asked Questions about portal-tailwind

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

FAQPage Schema
How do I isolate Tailwind styling from Bootstrap in a portal frontend?▼

To isolate Tailwind styling from Bootstrap in a portal frontend, apply a dedicated tw- prefixed utility system across pages and components. This keeps portal design-system constraints separate from Bootstrap dashboard styles to prevent conflicts.

What is a tw- prefix in Tailwind CSS and when do I need it for my design system?▼

A tw- prefix in Tailwind CSS is a custom utility namespace used to enforce a dedicated design system for portal UI. You need it when isolating portal styling from Bootstrap dashboards to ensure consistent typography, color tokens, and spacing without stylesheet collisions.

How do I apply Tailwind design system tokens to portal UI components?▼

To apply Tailwind design system tokens to portal UI components, import the portal-tailwind CSS and use tw- prefixed classes. This enforces consistent typography, color tokens, and spacing across your frontend layout structure while maintaining isolation.

Can I use Bootstrap and Tailwind together on the same frontend page?▼

You can use Bootstrap and Tailwind together on the same frontend by enforcing tw- prefixed Tailwind utilities for portal UI. This isolation strategy keeps Bootstrap dashboard styles separate and avoids cascading style conflicts across components.

Does enforcing a tw- prefix limit standard Tailwind utility classes in my components?▼

Enforcing a tw- prefix requires using custom utility names instead of standard Tailwind classes for portal UI. This constraint ensures portal styling remains isolated from Bootstrap dashboards but requires applying the prefixed classes consistently across components.

Related Skills

Explore More Design & Creative Skills→
Impertio-StudioImpertio-Studio

tailwind-core-architecture

Explain Tailwind CSS utility-first architecture, content scanning, layers, and responsive design.

Official
Advanced
ConnectiveTCSConnectiveTCS

tailwindcss

Style JARVIS UI components with Tailwind CSS utility classes and responsive theming.

Community
Intermediate
Oscar-Ivan-SalasOscar-Ivan-Salas

tailwind-patterns

Standardize frontend styling with CSS-first Tailwind v4 patterns.

Community
Intermediate
afonsolelisafonsolelis

bootstrap-guidelines

Enforce Bootstrap 5.3.0 conventions and prohibit custom CSS in HTML.

Community
Basic