Tailwindcss dark border 기본값 지정

1 개요[ | ]

Tailwindcss dark border 기본값 지정

2 방법1: .dark[ | ]

css

Copy

.dark * {
  border-color: #444;
}

3 방법2: @layer ★[ | ]

css

Copy

@layer base {
  *,
  ::before,
  ::after {
    @apply border-gray-300 dark:border-gray-600;
  }
}

html

Copy

<div class="w-screen h-screen p-8 dark:bg-black">

<button class="p-4 text-gray-400 border">apple</button>
<button class="p-4 text-gray-400 border-2">banana</button>
<button class="p-4 text-gray-400 border-4">cranberry</button>

<br><br><br><button onclick="document.documentElement.classList.toggle('dark')" class="p-4 text-gray-400 border">dark</button></div>
<script src="https://cdn.tailwindcss.com"></script><script>tailwind.config={darkMode:'class'}</script>
<style type="text/tailwindcss">
@layer base {*, ::before, ::after {@apply border-gray-300 dark:border-gray-600;}}
</style>

▶	cdn.tailwindcss.com should not be used in production. To use Tailwind CSS in production, install it as a PostCSS plugin or use the Tailwind CLI: https://tailwindcss.com/docs/installation

4 같이 보기[ | ]