tailwind.config.js 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  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. },
  34. animation: {
  35. 'slide-in-from-end': 'slide-in-from-end 0.25s ease-out forwards',
  36. 'slide-in-from-start': 'slide-in-from-start 0.25s ease-out forwards',
  37. 'slide-out-to-end': 'slide-out-to-end 0.25s ease-out forwards',
  38. 'slide-out-to-start': 'slide-out-to-start 0.25s ease-out forwards',
  39. 'expand-down': 'expand-down 0.2s ease-out forwards',
  40. 'collapse-up': 'collapse-up 0.15s ease-in forwards',
  41. },
  42. },
  43. },
  44. // plugins: [rtl, flip],
  45. corePlugins: {
  46. preflight: false,
  47. },
  48. future: {
  49. hoverOnlyWhenSupported: true,
  50. },
  51. darkMode: 'class',
  52. };