You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

tailwind.config.js 2.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. const { fontFamily } = require('tailwindcss/defaultTheme');
  2. /** @type {import('tailwindcss').Config} */
  3. module.exports = {
  4. darkMode: ['selector'],
  5. content: [
  6. './src/pages/**/*.tsx',
  7. './src/components/**/*.tsx',
  8. './src/layouts/**/*.tsx',
  9. ],
  10. theme: {
  11. container: {
  12. center: true,
  13. padding: '2rem',
  14. screens: {
  15. '2xl': '1400px',
  16. },
  17. },
  18. extend: {
  19. colors: {
  20. border: 'hsl(var(--border))',
  21. input: 'hsl(var(--input))',
  22. ring: 'hsl(var(--ring))',
  23. background: 'hsl(var(--background))',
  24. foreground: 'hsl(var(--foreground))',
  25. primary: {
  26. DEFAULT: 'hsl(var(--primary))',
  27. foreground: 'hsl(var(--primary-foreground))',
  28. },
  29. secondary: {
  30. DEFAULT: 'hsl(var(--secondary))',
  31. foreground: 'hsl(var(--secondary-foreground))',
  32. },
  33. destructive: {
  34. DEFAULT: 'hsl(var(--destructive))',
  35. foreground: 'hsl(var(--destructive-foreground))',
  36. },
  37. muted: {
  38. DEFAULT: 'hsl(var(--muted))',
  39. foreground: 'hsl(var(--muted-foreground))',
  40. },
  41. accent: {
  42. DEFAULT: 'hsl(var(--accent))',
  43. foreground: 'hsl(var(--accent-foreground))',
  44. },
  45. popover: {
  46. DEFAULT: 'hsl(var(--popover))',
  47. foreground: 'hsl(var(--popover-foreground))',
  48. },
  49. card: {
  50. DEFAULT: 'hsl(var(--card))',
  51. foreground: 'hsl(var(--card-foreground))',
  52. },
  53. backgroundInverseStandard: {
  54. DEFAULT: 'var(--background-inverse-standard)',
  55. foreground: 'var(--background-inverse-standard-foreground)',
  56. },
  57. },
  58. borderRadius: {
  59. lg: `var(--radius)`,
  60. md: `calc(var(--radius) - 2px)`,
  61. sm: 'calc(var(--radius) - 4px)',
  62. },
  63. fontFamily: {
  64. sans: ['var(--font-sans)', ...fontFamily.sans],
  65. },
  66. keyframes: {
  67. 'accordion-down': {
  68. from: { height: '0' },
  69. to: { height: 'var(--radix-accordion-content-height)' },
  70. },
  71. 'accordion-up': {
  72. from: { height: 'var(--radix-accordion-content-height)' },
  73. to: { height: '0' },
  74. },
  75. 'caret-blink': {
  76. '0%,70%,100%': { opacity: '1' },
  77. '20%,50%': { opacity: '0' },
  78. },
  79. },
  80. animation: {
  81. 'accordion-down': 'accordion-down 0.2s ease-out',
  82. 'accordion-up': 'accordion-up 0.2s ease-out',
  83. 'caret-blink': 'caret-blink 1.25s ease-out infinite',
  84. },
  85. },
  86. },
  87. plugins: [require('tailwindcss-animate')],
  88. };