tailwind.config.js 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. /** @type {import('tailwindcss').Config} */
  2. // import rtl from 'tailwindcss-rtl';
  3. // import flip from 'tailwindcss-flip';
  4. export default {
  5. content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  6. theme: {
  7. extend: {
  8. keyframes: {
  9. 'slide-in-from-end': {
  10. from: { transform: 'translateX(100%)' },
  11. to: { transform: 'translateX(0)' },
  12. },
  13. 'slide-in-from-start': {
  14. from: { transform: 'translateX(-100%)' },
  15. to: { transform: 'translateX(0)' },
  16. },
  17. 'slide-out-to-end': {
  18. from: { transform: 'translateX(0)' },
  19. to: { transform: 'translateX(100%)' },
  20. },
  21. 'slide-out-to-start': {
  22. from: { transform: 'translateX(0)' },
  23. to: { transform: 'translateX(-100%)' },
  24. },
  25. 'expand-down': {
  26. from: { opacity: '0', transform: 'scaleY(0)' },
  27. to: { opacity: '1', transform: 'scaleY(1)' },
  28. },
  29. 'collapse-up': {
  30. from: { opacity: '1', transform: 'scaleY(1)' },
  31. to: { opacity: '0', transform: 'scaleY(0)' },
  32. },
  33. 'scroll-left': {
  34. from: { transform: 'translateX(0)' },
  35. to: { transform: 'translateX(var(--scroll-distance, -50%))' },
  36. },
  37. },
  38. animation: {
  39. 'slide-in-from-end': 'slide-in-from-end 0.25s ease-out forwards',
  40. 'slide-in-from-start': 'slide-in-from-start 0.25s ease-out forwards',
  41. 'slide-out-to-end': 'slide-out-to-end 0.25s ease-out forwards',
  42. 'slide-out-to-start': 'slide-out-to-start 0.25s ease-out forwards',
  43. 'expand-down': 'expand-down 0.2s ease-out forwards',
  44. 'collapse-up': 'collapse-up 0.15s ease-in forwards',
  45. 'scroll-left': 'scroll-left 1s linear infinite',
  46. },
  47. },
  48. },
  49. // plugins: [rtl, flip],
  50. corePlugins: {
  51. preflight: false,
  52. },
  53. future: {
  54. hoverOnlyWhenSupported: true,
  55. },
  56. darkMode: 'class',
  57. };