tailwind.css 855 B

123456789101112131415161718192021222324252627282930313233343536373839
  1. @tailwind base;
  2. @tailwind components;
  3. @tailwind utilities;
  4. @layer base {
  5. html {
  6. @apply font-sans;
  7. }
  8. }
  9. @layer components {
  10. .flex-center {
  11. @apply flex items-center justify-center;
  12. }
  13. .flex-col-center {
  14. @apply flex flex-col items-center justify-center;
  15. }
  16. .outline-box {
  17. @apply outline-border relative cursor-pointer rounded-md p-1 outline outline-1;
  18. }
  19. .outline-box::after {
  20. @apply absolute left-1/2 top-1/2 z-20 h-0 w-[1px] rounded-sm opacity-0 outline outline-2 outline-transparent transition-all duration-300 content-[""];
  21. }
  22. .outline-box.outline-box-active {
  23. @apply outline-primary outline outline-2;
  24. }
  25. .outline-box.outline-box-active::after {
  26. display: none;
  27. }
  28. .outline-box:not(.outline-box-active):hover::after {
  29. @apply outline-primary left-0 top-0 h-full w-full p-1 opacity-100;
  30. }
  31. }