tailwind.config.ts 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. import { nextui } from "@nextui-org/react";
  2. import type { Config } from "tailwindcss";
  3. const MAX_WIDTH = 1440;
  4. const toRem = (px: number) => {
  5. return `${((4 * px) / (MAX_WIDTH / 10)).toFixed(2)}rem`;
  6. };
  7. const size: any = Array.from({ length: 100 }).reduce((map: any, _, index) => {
  8. map[index] = toRem(index);
  9. return map;
  10. }, {});
  11. // 0.0694rem
  12. const config: Config = {
  13. content: [
  14. "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
  15. "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
  16. "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  17. "./node_modules/@nextui-org/theme/dist/**/*.{" + "js,ts,jsx,tsx}",
  18. ],
  19. theme: {
  20. space: size,
  21. padding: size,
  22. height: size,
  23. minWidth: size,
  24. lineHeight: size,
  25. width: size,
  26. gap: size,
  27. minHeight: size,
  28. fontSize: size,
  29. extend: {
  30. backgroundImage: {
  31. "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
  32. "gradient-conic":
  33. "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
  34. },
  35. },
  36. colors: {
  37. "primary-color": "#ff6a01",
  38. },
  39. },
  40. plugins: [
  41. nextui({
  42. layout: {
  43. fontSize: {
  44. tiny: "10px", // text-tiny
  45. small: "12px", // text-small
  46. medium: "14px", // text-medium
  47. large: "16px", // text-large
  48. },
  49. lineHeight: {
  50. tiny: "14px", // text-tiny
  51. small: "24px", // text-small
  52. medium: "22px", // text-medium
  53. large: "20px",
  54. },
  55. },
  56. themes: {
  57. dark: {
  58. colors: {
  59. primary: "#ff6a01",
  60. },
  61. },
  62. light: {
  63. colors: {
  64. primary: "#ff6a01",
  65. },
  66. },
  67. },
  68. }),
  69. ],
  70. };
  71. export default config;