의사 요소

이전과 이후

before 및 after 수정자를 사용하여 ::before 및 ::after 의사 요소의 스타일을 지정합니다.

html
<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>

html
<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>

이러한 수정자를 사용할 때 테일윈드는 기본적으로 content: ''를 추가하므로, 다른 값을 원하지 않는 한 이를 지정할 필요가 없습니다.

html
<blockquote class="text-2xl font-semibold italic text-center text-slate-900">
  When you look
  <span
    class="before:block before:absolute before:-inset-1 before:-skew-y-3 before:bg-pink-500 relative inline-block"
  >
    <span class="relative text-white">annoyed</span>
  </span>
  all the time, people think that you're busy.
</blockquote>

html
<blockquote class="text-2xl font-semibold italic text-center text-slate-900">
  When you look
  <span
    class="before:block before:absolute before:-inset-1 before:-skew-y-3 before:bg-pink-500 relative inline-block"
  >
    <span class="relative text-white">annoyed</span>
  </span>
  all the time, people think that you're busy.
</blockquote>

테일윈드 프로젝트에서 대부분의 경우 ::before 및 ::after 의사 요소가 필요하지 않습니다. 일반적으로 실제 HTML 요소를 사용하는 것이 더 간단합니다.

다음 예시는 위와 동일한 디자인이지만 의사 요소 ::before 대신 <span>을 사용합니다. 좀 더 읽기 쉬워지고 코드가 실제로 줄어듭니다.

html
<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>

html
<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>

before과 after는 의사 요소의 내용이 실제로 DOM에 없고 사용자가 선택할 수 없는 상황에만 사용하세요.

사전 기본 스타일을 비활성화한 경우 콘텐츠 속성은 기본적으로 빈 문자열로 설정되지 않으며, before 및 after 수정자를 사용할 때마다 content-['']를 포함해야 한다는 점을 유의하세요.

참고

사전 기본 스타일을 비활성화한 경우 콘텐츠를 수동으로 설정해야 합니다.

html
<div class="before:content-[''] before:block ...">
  <!-- ... -->
</div>

html
<div class="before:content-[''] before:block ...">
  <!-- ... -->
</div>

자리 표시자 텍스트

placeholder 수정자를 사용하여 input 또는 textarea의 자리 표시자 텍스트에 스타일을 지정합니다.

html
<label class="relative block">
  <span class="sr-only">Search</span>
  <span class="absolute inset-y-0 left-0 flex items-center pl-2">
    <svg class="h-5 w-5 fill-slate-300" viewBox="0 0 20 20"><!-- ... --></svg>
  </span>
  <input
    class="placeholder:italic placeholder:text-slate-400 block bg-white w-full border border-slate-300 rounded-md py-2 pl-9 pr-3 shadow-sm focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1 sm:text-sm"
    placeholder="Search for anything..."
    type="text"
    name="search"
  />
</label>

html
<label class="relative block">
  <span class="sr-only">Search</span>
  <span class="absolute inset-y-0 left-0 flex items-center pl-2">
    <svg class="h-5 w-5 fill-slate-300" viewBox="0 0 20 20"><!-- ... --></svg>
  </span>
  <input
    class="placeholder:italic placeholder:text-slate-400 block bg-white w-full border border-slate-300 rounded-md py-2 pl-9 pr-3 shadow-sm focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1 sm:text-sm"
    placeholder="Search for anything..."
    type="text"
    name="search"
  />
</label>

파일 입력 버튼

file 수정자를 사용하여 파일 입력 버튼에 스타일을 지정합니다.

html
<form class="flex items-center space-x-6">
  <div class="shrink-0">
    <img
      class="h-16 w-16 object-cover rounded-full"
      src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1361&q=80"
      alt="Current profile photo"
    />
  </div>
  <label class="block">
    <span class="sr-only">Choose profile photo</span>
    <input
      type="file"
      class="block w-full text-sm text-slate-500
      file:mr-4 file:py-2 file:px-4
      file:rounded-full file:border-0
      file:text-sm file:font-semibold
      file:bg-violet-50 file:text-violet-700
      hover:file:bg-violet-100
    "
    />
  </label>
</form>

html
<form class="flex items-center space-x-6">
  <div class="shrink-0">
    <img
      class="h-16 w-16 object-cover rounded-full"
      src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1361&q=80"
      alt="Current profile photo"
    />
  </div>
  <label class="block">
    <span class="sr-only">Choose profile photo</span>
    <input
      type="file"
      class="block w-full text-sm text-slate-500
      file:mr-4 file:py-2 file:px-4
      file:rounded-full file:border-0
      file:text-sm file:font-semibold
      file:bg-violet-50 file:text-violet-700
      hover:file:bg-violet-100
    "
    />
  </label>
</form>

테일윈드의 테두리 재설정은 파일 입력 버튼에는 적용되지 않습니다. 즉, 파일 입력 버튼에 테두리를 추가하려면 테두리 너비 유틸리티와 함께 file:border-solid와 같은 클래스를 사용하여 테두리 스타일을 명시적으로 설정해야 합니다.

html
<input type="file" class="file:border file:border-solid ..." />

html
<input type="file" class="file:border file:border-solid ..." />

목록 표시

marker 수정자를 사용하여 목록의 카운터 또는 글머리 기호에 스타일을 지정합니다.

html
<ul
  role="list"
  class="marker:text-sky-400 list-disc pl-5 space-y-3 text-slate-500"
  dark-class="marker:text-sky-400 list-disc pl-5 space-y-3 text-slate-400"
>
  <li>5 cups chopped Porcini mushrooms</li>
  <li>1/2 cup of olive oil</li>
  <li>3lb of celery</li>
</ul>

html
<ul
  role="list"
  class="marker:text-sky-400 list-disc pl-5 space-y-3 text-slate-500"
  dark-class="marker:text-sky-400 list-disc pl-5 space-y-3 text-slate-400"
>
  <li>5 cups chopped Porcini mushrooms</li>
  <li>1/2 cup of olive oil</li>
  <li>3lb of celery</li>
</ul>

marker 수정자는 상속 가능하도록 설계되었습니다. 따라서 <li> 요소에 직접 사용할 수도 있지만, 반복을 피하기 위해 부모 요소에 사용할 수도 있습니다.

강조 표시된 텍스트

selection 수정자를 사용하여 활성 텍스트 선택에 스타일을 지정합니다.

html
<div class="selection:bg-fuchsia-300 selection:text-fuchsia-900">
  <p>
    So I started to walk into the water. I won't lie to you boys, I was
    terrified. But I pressed on, and as I made my way past the breakers a
    strange calm came over me. I don't know if it was divine intervention or the
    kinship of all living things but I tell you Jerry at that moment, I
    <em>was</em> a marine biologist.
  </p>
</div>

html
<div class="selection:bg-fuchsia-300 selection:text-fuchsia-900">
  <p>
    So I started to walk into the water. I won't lie to you boys, I was
    terrified. But I pressed on, and as I made my way past the breakers a
    strange calm came over me. I don't know if it was divine intervention or the
    kinship of all living things but I tell you Jerry at that moment, I
    <em>was</em> a marine biologist.
  </p>
</div>

selection 수정자는 상속이 가능하도록 설계되었으므로 트리의 어느 곳에나 추가할 수 있으며 모든 하위 요소에 적용됩니다.

이렇게 하면 사이트 전체에서 브랜드에 맞게 선택 색상을 쉽게 설정할 수 있습니다.

html
<html>
  <head>
    <!-- ... -->
  </head>
  <body class="selection:bg-pink-300">
    <!-- ... -->
  </body>
</html>

html
<html>
  <head>
    <!-- ... -->
  </head>
  <body class="selection:bg-pink-300">
    <!-- ... -->
  </body>
</html>

첫 줄과 첫 글자

콘텐츠 블록의 첫 줄은 first-line 수정자를 사용하여 스타일을 지정하고, 첫 글자는 first-letter 수정자를 사용하여 스타일을 지정합니다.

html
<p
  class="first-line:uppercase first-line:tracking-widest
  first-letter:text-7xl first-letter:font-bold first-letter:text-slate-900
  first-letter:mr-3 first-letter:float-left
"
  dark-class="first-line:uppercase first-line:tracking-widest
  first-letter:text-7xl first-letter:font-bold first-letter:text-white
  first-letter:mr-3 first-letter:float-left
"
>
  Well, let me tell you something, funny boy. Y'know that little stamp, the one
  that says "New York Public Library"? Well that may not mean anything to you,
  but that means a lot to me. One whole hell of a lot.
</p>

html
<p
  class="first-line:uppercase first-line:tracking-widest
  first-letter:text-7xl first-letter:font-bold first-letter:text-slate-900
  first-letter:mr-3 first-letter:float-left
"
  dark-class="first-line:uppercase first-line:tracking-widest
  first-letter:text-7xl first-letter:font-bold first-letter:text-white
  first-letter:mr-3 first-letter:float-left
"
>
  Well, let me tell you something, funny boy. Y'know that little stamp, the one
  that says "New York Public Library"? Well that may not mean anything to you,
  but that means a lot to me. One whole hell of a lot.
</p>

대화 배경

backdrop 수정자를 사용하여 기본 <dialog> 요소의 배경에 스타일을 지정합니다.

html
<dialog class="backdrop:bg-gray-50">
  <form method="dialog">
    <!-- ... -->
  </form>
</dialog>

html
<dialog class="backdrop:bg-gray-50">
  <form method="dialog">
    <!-- ... -->
  </form>
</dialog>

프로젝트에서 기본 <dialog> 요소를 사용한다면, open 수정자를 사용하는 열기/닫기 상태에 스타일 지정하기를 읽어 보는 것도 좋습니다.

의사 요소

이전과 이후​

자리 표시자 텍스트​

파일 입력 버튼​

목록 표시​

강조 표시된 텍스트​

첫 줄과 첫 글자​

대화 배경​