Profile My skills Saved Collections Edit profile Submit a skill

Tailwind

Utility-first CSS.

dhaupin 29e56a1 802 B Updated
Web & Frontend

File contents

Tailwind

Utility-first CSS.

When To Use

  • Rapid styling
  • Modern UIs
  • Component libraries

What To Do

1. Classes

<div class="p-4 bg-blue-500 text-white rounded-lg">
  Content
</div>

2. Common

Class What
p-4 / m-4 Padding/Margin
flex / grid Layout
bg-red-500 Background
text-sm Text size
w-full Width

3. Responsive

<div class="w-full md:w-1/2">
  Mobile first
</div>

4. Config

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: { extend: {} },
  plugins: []
}

Role: Tailwind Developer
Input: HTML
Output: Styled

Utility CSS.

dhaupin/vant/tree/main/models/public/skills/vant-skill-tailwind commit 29e56a15b4

Browse category

Frequently asked questions

npx skillmds@latest add dhaupin/tailwind