Tailwind Css

Tailwind CSS (v4)

Overview

Tailwind CSS is a utility-first CSS framework. Style by combining single-purpose classes in markup.

We use Tailwind v4 only. There is no tailwind.config.js, tailwind.config.ts, or tailwind.config.mjs. Configuration is done in CSS via @import "tailwindcss" and the @theme directive, plus the Vite or PostCSS plugin.

• Entry: One main CSS file with @import "tailwindcss";
• Build: @tailwindcss/vite (Vite) or @tailwindcss/postcss (Next.js)
• Theme: @theme { ... } in that same CSS file (or imported CSS). No JS config.

Core principle: Prefer utility classes in markup; extend with @theme and custom CSS when needed. Never suggest or create tailwind.config.* or content/theme in a config file.

---

Installation

Next.js (App Router, 15+)

1. Create project (if needed): create-next-app@latest — see Next.js docs. 2. Add packages: tailwindcss, @tailwindcss/postcss, postcss (via your package manager). 3. Create postcss.config.mjs in project root:

const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};
export default config;

4. In ./app/globals.css:

@import "tailwindcss";

5. Run the dev script (e.g. dev in package.json).

Use className in React/TSX (e.g. in app/page.tsx):

export default function Home() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  );
}

Ensure app/globals.css is imported in app/layout.tsx (Create Next App does this by default).

Vite (React, Vue, Qwik, etc.)

1. Add packages: tailwindcss, @tailwindcss/vite (via your package manager). 2. In vite.config.ts:

import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [tailwindcss(), /* ... */],
})

3. Main CSS (e.g. src/index.css): @import "tailwindcss";

Tailwind CLI (standalone)

1. Add packages: tailwindcss, @tailwindcss/cli (via your package manager). 2. Main CSS: @import "tailwindcss"; 3. Build: @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch (invoke via package manager).

---

Using Tailwind

• Use utility classes in markup: className in React/Next.js, class in Qwik/Vue.
• Prefer design tokens (theme) over arbitrary values when possible.
• Group related utilities for readability (layout → spacing → typography → colors → effects).

Examples: text-3xl font-bold underline, flex items-center gap-4, p-6 rounded-xl bg-white shadow-lg, max-w-sm mx-auto.

---

Theme: @theme only (no config file)

Only in CSS. Use @theme in the same file as @import "tailwindcss" (or in CSS imported by it).

Extending the default theme

@import "tailwindcss";

@theme {
  --font-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 120rem;
  --color-avocado-500: oklch(0.84 0.18 117.33);
  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
}

Use: font-display, 3xl:, bg-avocado-500, ease-fluid.

Overriding defaults

Redefine a variable inside @theme to override:

@theme {
  --breakpoint-sm: 30rem;
}

Theme variable namespaces (quick reference)

Referencing other variables

Use @theme inline when a token should reference another variable:

@theme inline {
  --font-sans: var(--font-inter);
}

Custom keyframes

Define keyframes inside @theme so they are used by --animate-*:

@theme {
  --animate-fade-in-scale: fade-in-scale 0.3s ease-out;
  @keyframes fade-in-scale {
    0% { opacity: 0; transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
  }
}

For more theme options (overriding full namespaces, custom theme, sharing across projects), see reference.md.

---

Custom styles

Plain CSS

Add any custom CSS in the same file as @import "tailwindcss" or in imported files:

@import "tailwindcss";

.my-custom-style {
  /* ... */
}

Base layer

Use @layer base for element defaults:

@layer base {
  h1 { font-size: var(--text-2xl); }
  h2 { font-size: var(--text-xl); }
}

Component layer

Use @layer components for reusable component-like classes (override with utilities when needed):

@layer components {
  .card {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-xl);
  }
}

Custom utilities: @utility

Simple utility:

@utility content-auto {
  content-visibility: auto;
}

Complex (e.g. scrollbar hidden):

@utility scrollbar-hidden {
  &::-webkit-scrollbar {
    display: none;
  }
}

Custom variants: @variant

Use @variant inside custom CSS:

.my-element {
  background: white;
  @variant dark {
    background: black;
  }
}

Or register a named variant with @custom-variant:

@custom-variant theme-midnight (&:where([data-theme="midnight"] *));

Then use: theme-midnight:bg-black.

---

Arbitrary values and properties

• Arbitrary value: top-[117px], bg-[#bada55], text-[22px], lg:top-[344px].
• CSS variable in arbitrary value: fill-(--my-brand-color) (shorthand for fill-[var(--my-brand-color)]).
• Arbitrary property: [mask-type:luminance], [--scroll-offset:56px].
• Whitespace in value: Use underscore _ for space, e.g. grid-cols-[1fr_500px_2fr].
• Ambiguity: Use a type hint: text-(length:--my-var) vs text-(color:--my-var).

---

Compatibility

• Browsers: Tailwind v4 targets modern browsers (Chrome 111+, Safari 16.4+, Firefox 128+). Some utilities use newer features; avoid those if you need older support.
• Preprocessors: Do not use Tailwind with Sass/Less/Stylus in the same pipeline; use Tailwind as the main styling layer.

---

Quick reference

---

Common mistakes

• Wrong attribute: React/Next use className; Qwik/Vue use class.
• Missing import: The file with @import "tailwindcss" must be the one loaded by the app (e.g. in root layout).
• Config file: Do not create or suggest tailwind.config.js, tailwind.config.ts, or any tailwind.config.*. Do not suggest content: [], theme: {}, or plugins in a JS config. Tailwind v4 uses only CSS (@import "tailwindcss" + @theme) and the Vite/PostCSS plugin.

---

Additional resources

• reference.md — Theme options, official doc links, default theme summary.
• Official: Tailwind CSS v4 Docs — Installation, theme, adding custom styles, compatibility.

License

Skill License - Free Use

This skill (the documentation, structure, and implementation) was created by Ender Puentes <Endev/> and is provided for free and open use. You are free to:

• Use this skill in any project, personal or commercial
• Modify the skill to fit your needs
• Distribute the skill to others
• Share modified versions of the skill
• Include this skill in your own skill collections

No restrictions apply – this skill is available for unrestricted use. Attribution is appreciated but not required.

Note: This skill documents and references Tailwind CSS; the skill itself is an independent work. Tailwind CSS is a separate work with its own license (MIT).

Tailwind CSS v4 — Reference & Official Documentation

This file complements the tailwind-css skill with theme details and links to the official docs for indexing and deeper reference.

Official documentation (indexable)

• Installation
• Next.js: https://tailwindcss.com/docs/installation/framework-guides/nextjs
• Vite: https://tailwindcss.com/docs/installation/framework-guides/vite
• Tailwind CLI: https://tailwindcss.com/docs/installation/tailwind-cli
• Core concepts
• Theme variables: https://tailwindcss.com/docs/theme
• Adding custom styles: https://tailwindcss.com/docs/adding-custom-styles
• Styling with utility classes: https://tailwindcss.com/docs/styling-with-utility-classes
• Compatibility: https://tailwindcss.com/docs/compatibility
• Editor setup (e.g. Cursor/VS Code): https://tailwindcss.com/docs/editor-setup

Theme: advanced options

Overriding an entire namespace

Set the namespace to initial and then define only the variables you want:

@theme {
  --color-*: initial;
  --color-white: #fff;
  --color-primary: #3f3cbb;
  --color-midnight: #121063;
}

Using a fully custom theme

Disable default theme and use only your tokens:

@theme {
  --*: initial;
  --spacing: 4px;
  --font-body: Inter, sans-serif;
  --color-lagoon: oklch(0.72 0.11 221.19);
  --color-coral: oklch(0.74 0.17 40.24);
}

Generating all CSS variables (static)

Use @theme static so all theme variables are always emitted:

@theme static {
  --color-primary: var(--color-red-500);
  --color-secondary: var(--color-blue-500);
}

Sharing theme across projects

Put shared tokens in a separate CSS file and import it:

/* packages/brand/theme.css */
@theme {
  --*: initial;
  --font-body: Inter, sans-serif;
  --color-primary: oklch(0.62 0.21 260);
}

/* app/globals.css */
@import "tailwindcss";
@import "../brand/theme.css";

Using theme variables elsewhere

• In custom CSS: var(--color-gray-700), var(--text-base), var(--radius-xl).
• In arbitrary values: rounded-[calc(var(--radius-xl)-1px)].
• In JavaScript: getComputedStyle(document.documentElement).getPropertyValue("--shadow-xl").

Default theme (summary)

Tailwind’s default theme provides:

• Fonts: --font-sans, --font-serif, --font-mono
• Colors: Full palettes for red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, slate, gray, zinc, neutral, stone, plus --color-black, --color-white
• Breakpoints: --breakpoint-sm (40rem), --breakpoint-md (48rem), --breakpoint-lg (64rem), --breakpoint-xl (80rem), --breakpoint-2xl (96rem)
• Spacing: --spacing (0.25rem) and spacing scale
• Typography: --text-*, --font-weight-*, --tracking-*, --leading-*
• Radius: --radius-xs through --radius-4xl
• Shadows: --shadow-*, --inset-shadow-*, --drop-shadow-*
• Easing: --ease-in, --ease-out, --ease-in-out
• Animations: --animate-spin, --animate-ping, --animate-pulse, --animate-bounce (with keyframes)

Full default theme: see node_modules/tailwindcss/theme.css or the theme variables docs.

Functional utilities (@utility with --value())

For utilities that take a value, use @utility with --value():

• Theme: --value(--tab-size-*)
• Bare type: --value(integer), --value(percentage)
• Literal: --value("inherit", "initial", "unset")
• Arbitrary: --value([integer]), --value([length])

Example:

@theme {
  --tab-size-github: 8;
}
@utility tab-* {
  tab-size: --value(--tab-size-*, integer, [integer]);
}

No config file (reminder)

Tailwind v4 does not use:

• tailwind.config.js
• tailwind.config.ts
• tailwind.config.mjs
• content: []
• theme: { extend: { ... } }
• plugins: [] in a JS config

Configuration is done only in CSS via @import "tailwindcss", @theme, @layer, @utility, and @custom-variant, plus the build plugin (@tailwindcss/vite or @tailwindcss/postcss).