css 를 직접 설정하지 말고 tailwind 에서 미리 만들어 놓은 css 들을 조합해라
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
<div class="shrink-0">
<img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
</div>
<div>
<div class="text-xl font-medium text-black">ChitChat</div>
<p class="text-slate-500">You have a new message!</p>
</div>
</div>
장점
단점
focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500
// dark > md > hover 일 때 배경색 지정
<button class="dark:md:hover:bg-fuchsia-600 ...">
Save changes
</button>
:hover
, :focus
, :first-child
, and :required
::before
, ::after
, ::placeholder
, and ::selection
prefers-reduced-motion
[dir="rtl"]
and [open]
<ul role="list" class="p-6 divide-y divide-slate-200">
{#each people as person}
<!-- Remove top/bottom padding when first/last child -->
<li class="flex py-4 first:pt-0 last:pb-0">
<img class="h-10 w-10 rounded-full" src="{person.imageUrl}" alt="" />
<div class="ml-3 overflow-hidden">
<p class="text-sm font-medium text-slate-900">{person.name}</p>
<p class="text-sm text-slate-500 truncate">{person.email}</p>
</div>
</li>
{/each}
</ul>
<form>
<label class="block">
<span class="block text-sm font-medium text-slate-700">Username</span>
<!-- Using form state modifers, the classes can be identical for every input -->
<input type="text" value="tbone" disabled class="mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400
focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500
disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none
invalid:border-pink-500 invalid:text-pink-600
focus:invalid:border-pink-500 focus:invalid:ring-pink-500
"/>
</label>
<!-- ... -->
</form>
group-*
로 스타일 지정하면 된다.<a href="#" class="group block max-w-xs mx-auto rounded-lg p-6 bg-white ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-sky-500 hover:ring-sky-500">
<div class="flex items-center space-x-3">
<svg class="h-6 w-6 stroke-sky-500 group-hover:stroke-white" fill="none" viewBox="0 0 24 24"><!-- ... --></svg>
<h3 class="text-slate-900 group-hover:text-white text-sm font-semibold">New project</h3>
</div>
<p class="text-slate-500 group-hover:text-white text-sm">Create a new project from a variety of starting templates.</p>
</a>
peer
지정peer-*
로 스타일 지정하면 된다.<form>
<label class="block">
<span class="block text-sm font-medium text-slate-700">Email</span>
<input type="email" class="peer ..."/>
<p class="mt-2 invisible peer-invalid:visible text-pink-600 text-sm">
Please provide a valid email address.
</p>
</label>
</form>
::after
or ::before
로 html 에 없고 css 에서만 보이는 요소를 style 할 수 있다.content:’’
는 tailwind 에서 알아서 넣어준다.<label class="block">
<span class="after:content-['*'] after:ml-0.5 after:text-red-500 block text-sm font-medium text-slate-700">
Email
</span>
<input type="email" name="email" class="mt-1 px-3 py-2 bg-white border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block w-full rounded-md sm:text-sm focus:ring-1" placeholder="you@example.com" />
</label>
<blockquote class="text-2xl font-semibold italic text-center text-slate-900">
When you look
<span class="relative">
<span class="block absolute -inset-1 -skew-y-3 bg-pink-500" aria-hidden="true"></span>
<span class="relative text-white">annoyed</span>
</span>
all the time, people think that you're busy.
</blockquote>
@apply
는 정말 꼭 필요할 때만 써라 ( 깔끔해질 것 같다고, 초기에 추상화를 진행하지 마라 )/**
* This injects Tailwind's base styles and any base styles registered by
* plugins.
*/
@tailwind base;
/**
* This injects Tailwind's component classes and any component classes
* registered by plugins.
*/
@tailwind components;
/**
* This injects Tailwind's utility classes and any utility classes registered
* by plugins.
*/
@tailwind utilities;
/**
* Use this directive to control where Tailwind injects the hover, focus,
* responsive, dark mode, and other variants of each class.
*
* If omitted, Tailwind will append these classes to the very end of
* your stylesheet by default.
*/
@tailwind variants;