Tailwind & Related Things

Best practices

• (source) Don’t use @apply just to make things look “cleaner”. Otherwise you are basically just writing CSS again and throwing away all of the workflow and maintainability advantages Tailwind gives you.
• Play with tailwind

group-hover with prefix

<div class="tw-group">
  <div class="group-hover:tw-bg-slate-500"></div>
</div>

:not in tailwind

Example: Don’t apply :hover effect on the :disabled button

[&:not(:disabled)]:hover:tw-bg-gray-500

Color preview doesn’t show in VSCode

If you have a custom color in tailwind config file that is CSS Variables, It will not show preview in VSCode (preview = a square containing the color before the class)

{
  theme: {
    extend: {
      colors: {
        'custom': 'var(--custom-color)', // not show
        'hello': '#000', // show
      }
    }
  }
}