tailwind.config.js 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. /** @type {import('tailwindcss').Config} */
  2. export default {
  3. darkMode: ["class"],
  4. content: [
  5. "./index.html",
  6. "./src/**/*.{js,ts,jsx,tsx}",
  7. ],
  8. theme: {
  9. container: {
  10. center: true,
  11. padding: "2rem",
  12. screens: {
  13. "2xl": "1400px",
  14. },
  15. },
  16. extend: {
  17. colors: {
  18. border: "hsl(var(--border))",
  19. input: "hsl(var(--input))",
  20. ring: "hsl(var(--ring))",
  21. background: "hsl(var(--background))",
  22. foreground: "hsl(var(--foreground))",
  23. primary: {
  24. DEFAULT: "hsl(var(--primary))",
  25. foreground: "hsl(var(--primary-foreground))",
  26. },
  27. secondary: {
  28. DEFAULT: "hsl(var(--secondary))",
  29. foreground: "hsl(var(--secondary-foreground))",
  30. },
  31. destructive: {
  32. DEFAULT: "hsl(var(--destructive))",
  33. foreground: "hsl(var(--destructive-foreground))",
  34. },
  35. muted: {
  36. DEFAULT: "hsl(var(--muted))",
  37. foreground: "hsl(var(--muted-foreground))",
  38. },
  39. accent: {
  40. DEFAULT: "hsl(var(--accent))",
  41. foreground: "hsl(var(--accent-foreground))",
  42. },
  43. popover: {
  44. DEFAULT: "hsl(var(--popover))",
  45. foreground: "hsl(var(--popover-foreground))",
  46. },
  47. card: {
  48. DEFAULT: "hsl(var(--card))",
  49. foreground: "hsl(var(--card-foreground))",
  50. },
  51. },
  52. borderRadius: {
  53. lg: "var(--radius)",
  54. md: "calc(var(--radius) - 2px)",
  55. sm: "calc(var(--radius) - 4px)",
  56. },
  57. spacing: {
  58. 'safe-area-inset-bottom': 'env(safe-area-inset-bottom)',
  59. 'mobile-nav': 'var(--mobile-nav-total)',
  60. },
  61. fontFamily: {
  62. sans: [
  63. '"InterVariable"',
  64. 'Inter',
  65. 'ui-sans-serif',
  66. 'system-ui',
  67. '-apple-system',
  68. 'BlinkMacSystemFont',
  69. 'Segoe UI',
  70. 'sans-serif',
  71. ],
  72. },
  73. fontSize: {
  74. xxs: ["11px", { lineHeight: "14px" }],
  75. },
  76. },
  77. },
  78. plugins: [require('@tailwindcss/typography')],
  79. }