tailwind

Tailwind CSS v4 utility classes - @theme, @utility, @plugin, grid, container queries, flexbox, spacing, responsive design. Use for CSS-only styling with Tailwind utilities. For pre-built components use shadcn-svelte skill. For UX principles use frontend-design skill.

Jump to install

Repository: digi4care/opencode-mastery
Last source activity: February 18, 2026 at 17:33
Detected SKILL.md language: English
Stars: 0
Forks: 0

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

A direct command skips the review prompt. Inspect the source before running it.

npx skills add https://github.com/digi4care/opencode-mastery --skill tailwind

The command stays on one line. Scroll horizontally to inspect it before copying.

Prefer a local copy? Download the files currently available to SkillsMP.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

File Explorer

36 files

SKILL.md

Source instructions · Read-only preview

Back to search Back to installation

opencode-memory

Persistent memory system with .memory.md, compaction, and cross-project sync

2026-02-21

ace-analysis

Analyzes sessions using ACE framework to generate prompt improvement suggestions focused on durable patterns.

2026-02-21

database-architect

Database technology selection and architecture - choose between SQL vs NoSQL, PostgreSQL vs MySQL vs MongoDB, scaling strategies, migration planning. Use for database DECISIONS. For PostgreSQL implementation use postgresql skill.

2026-02-21

View all from this repository

@import "tailwindcss";

@theme {
  --color-primary: #3b82f6;
  --font-sans: "Inter", sans-serif;
}

@utility text-balance {
  text-wrap: balance;
}

@import "tailwindcss";
@plugin "@tailwindcss/forms";
@plugin "@tailwindcss/typography";

<div class="@container">
  <div class="@md:flex @lg:grid gap-4">Adapts to container size</div>
</div>

<div class="grid grid-cols-4 gap-4">
  <div class="col-span-2">Wide (2 cols)</div>
  <div class="row-span-2">Tall (2 rows)</div>
  <div>Item</div>
  <div>Item</div>
</div>

name	tailwind
description	Tailwind CSS v4 utility classes - @theme, @utility, @plugin, grid, container queries, flexbox, spacing, responsive design. Use for CSS-only styling with Tailwind utilities. For pre-built components use shadcn-svelte skill. For UX principles use frontend-design skill.
license	MIT
compatibility	opencode
metadata	{"author":"OpenCode Community","version":"2.0","source":"https://tailwindcss.com/docs"}

Feature	Syntax	Description
v4 Import	`@import "tailwindcss"`	Replaces `@tailwind` directives
Theme	`@theme { --color-*: ... }`	CSS variables for customization
Custom Utilities	`@utility name { ... }`

name	tailwind
description	Tailwind CSS v4 utility classes - @theme, @utility, @plugin, grid, container queries, flexbox, spacing, responsive design. Use for CSS-only styling with Tailwind utilities. For pre-built components use shadcn-svelte skill. For UX principles use frontend-design skill.
license	MIT
compatibility	opencode
metadata	{"author":"OpenCode Community","version":"2.0","source":"https://tailwindcss.com/docs"}

Feature	Syntax	Description
v4 Import	`@import "tailwindcss"`	Replaces `@tailwind` directives
Theme	`@theme { --color-*: ... }`	CSS variables for customization
Custom Utilities	`@utility name { ... }`

tailwind

Install options

Review the source files

Tailwind CSS v4

Quick Summary

Tailwind CSS v4

Quick Summary

When to Use This Skill

Quick Reference

Tailwind v4 Import

Custom Utilities (@utility)

Custom Plugin (@plugin)

Container Queries

Grid Layout

Best Practices

Framework Integration

References

tailwind

Source facts

Install options

Review the source files

More from this repository

Tailwind CSS v4

Quick Summary

Tailwind CSS v4

Quick Summary

When to Use This Skill

Quick Reference

Tailwind v4 Import

Custom Utilities (@utility)

Custom Plugin (@plugin)

Container Queries

Grid Layout

Best Practices

Framework Integration

References

More from this repository