tailwind.config.js 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269
  1. import tailwindcssAnimate from 'tailwindcss-animate'
  2. import typography from '@tailwindcss/typography'
  3. /** @type {import('tailwindcss').Config} */
  4. export default {
  5. darkMode: ['class'],
  6. content: [
  7. './pages/**/*.{ts,tsx}',
  8. './components/**/*.{ts,tsx}',
  9. './app/**/*.{ts,tsx}',
  10. './src/**/*.{ts,tsx}',
  11. ],
  12. theme: {
  13. container: {
  14. center: true,
  15. padding: '2rem',
  16. screens: {
  17. '2xl': '1400px',
  18. },
  19. },
  20. extend: {
  21. colors: {
  22. border: 'hsl(var(--border))',
  23. input: 'hsl(var(--input))',
  24. ring: 'hsl(var(--ring))',
  25. background: 'hsl(var(--background))',
  26. foreground: 'hsl(var(--foreground))',
  27. primary: {
  28. DEFAULT: 'hsl(var(--primary))',
  29. foreground: 'hsl(var(--primary-foreground))',
  30. },
  31. secondary: {
  32. DEFAULT: 'hsl(var(--secondary))',
  33. foreground: 'hsl(var(--secondary-foreground))',
  34. },
  35. destructive: {
  36. DEFAULT: 'hsl(var(--destructive))',
  37. foreground: 'hsl(var(--destructive-foreground))',
  38. },
  39. muted: {
  40. DEFAULT: 'hsl(var(--muted))',
  41. foreground: 'hsl(var(--muted-foreground))',
  42. },
  43. accent: {
  44. DEFAULT: 'hsl(var(--accent))',
  45. foreground: 'hsl(var(--accent-foreground))',
  46. },
  47. popover: {
  48. DEFAULT: 'hsl(var(--popover))',
  49. foreground: 'hsl(var(--popover-foreground))',
  50. },
  51. card: {
  52. DEFAULT: 'hsl(var(--card))',
  53. foreground: 'hsl(var(--card-foreground))',
  54. },
  55. },
  56. borderRadius: {
  57. lg: 'var(--radius)',
  58. md: 'calc(var(--radius) - 2px)',
  59. sm: 'calc(var(--radius) - 4px)',
  60. },
  61. keyframes: {
  62. 'accordion-down': {
  63. from: { height: '0' },
  64. to: { height: 'var(--radix-accordion-content-height, auto)' },
  65. },
  66. 'accordion-up': {
  67. from: { height: 'var(--radix-accordion-content-height, auto)' },
  68. to: { height: '0' },
  69. },
  70. },
  71. animation: {
  72. 'accordion-down': 'accordion-down 0.2s ease-out',
  73. 'accordion-up': 'accordion-up 0.2s ease-out',
  74. },
  75. typography: {
  76. DEFAULT: {
  77. css: {
  78. maxWidth: '100%',
  79. color: 'var(--tw-prose-body)',
  80. '[class~="lead"]': {
  81. color: 'var(--tw-prose-lead)',
  82. },
  83. a: {
  84. color: 'var(--tw-prose-links)',
  85. textDecoration: 'underline',
  86. fontWeight: '500',
  87. },
  88. strong: {
  89. color: 'var(--tw-prose-bold)',
  90. fontWeight: '600',
  91. },
  92. 'ol[type="A"]': {
  93. listStyleType: 'upper-alpha',
  94. },
  95. 'ol[type="a"]': {
  96. listStyleType: 'lower-alpha',
  97. },
  98. 'ol[type="A" s]': {
  99. listStyleType: 'upper-alpha',
  100. },
  101. 'ol[type="a" s]': {
  102. listStyleType: 'lower-alpha',
  103. },
  104. 'ol[type="I"]': {
  105. listStyleType: 'upper-roman',
  106. },
  107. 'ol[type="i"]': {
  108. listStyleType: 'lower-roman',
  109. },
  110. 'ol[type="I" s]': {
  111. listStyleType: 'upper-roman',
  112. },
  113. 'ol[type="i" s]': {
  114. listStyleType: 'lower-roman',
  115. },
  116. 'ol[type="1"]': {
  117. listStyleType: 'decimal',
  118. },
  119. 'ol > li': {
  120. position: 'relative',
  121. paddingLeft: '1.75em',
  122. },
  123. 'ol > li::before': {
  124. content: 'counter(list-item, var(--list-counter-style, decimal)) "."',
  125. position: 'absolute',
  126. fontWeight: '400',
  127. color: 'var(--tw-prose-counters)',
  128. left: '0',
  129. },
  130. 'ul > li': {
  131. position: 'relative',
  132. paddingLeft: '1.75em',
  133. },
  134. 'ul > li::before': {
  135. content: '""',
  136. position: 'absolute',
  137. backgroundColor: 'var(--tw-prose-bullets)',
  138. borderRadius: '50%',
  139. width: '0.375em',
  140. height: '0.375em',
  141. top: 'calc(0.875em - 0.1875em)',
  142. left: '0.25em',
  143. },
  144. hr: {
  145. borderColor: 'var(--tw-prose-hr)',
  146. borderTopWidth: 1,
  147. marginTop: '3em',
  148. marginBottom: '3em',
  149. },
  150. blockquote: {
  151. fontWeight: '500',
  152. fontStyle: 'italic',
  153. color: 'var(--tw-prose-quotes)',
  154. borderLeftWidth: '0.25rem',
  155. borderLeftColor: 'var(--tw-prose-quote-borders)',
  156. quotes: '"\\201C""\\201D""\\2018""\\2019"',
  157. marginTop: '1.6em',
  158. marginBottom: '1.6em',
  159. paddingLeft: '1em',
  160. },
  161. h1: {
  162. color: 'var(--tw-prose-headings)',
  163. fontWeight: '800',
  164. fontSize: '2.25em',
  165. marginTop: '0',
  166. marginBottom: '0.8888889em',
  167. lineHeight: '1.1111111',
  168. },
  169. h2: {
  170. color: 'var(--tw-prose-headings)',
  171. fontWeight: '700',
  172. fontSize: '1.5em',
  173. marginTop: '2em',
  174. marginBottom: '1em',
  175. lineHeight: '1.3333333',
  176. },
  177. h3: {
  178. color: 'var(--tw-prose-headings)',
  179. fontWeight: '600',
  180. fontSize: '1.25em',
  181. marginTop: '1.6em',
  182. marginBottom: '0.6em',
  183. lineHeight: '1.6',
  184. },
  185. h4: {
  186. color: 'var(--tw-prose-headings)',
  187. fontWeight: '600',
  188. marginTop: '1.5em',
  189. marginBottom: '0.5em',
  190. lineHeight: '1.5',
  191. },
  192. 'figure > *': {
  193. margin: '0',
  194. },
  195. figcaption: {
  196. color: 'var(--tw-prose-captions)',
  197. fontSize: '0.875em',
  198. lineHeight: '1.4285714',
  199. marginTop: '0.8571429em',
  200. },
  201. code: {
  202. color: 'var(--tw-prose-code)',
  203. fontWeight: '600',
  204. fontSize: '0.875em',
  205. },
  206. 'code::before': {
  207. content: '""',
  208. },
  209. 'code::after': {
  210. content: '""',
  211. },
  212. 'a code': {
  213. color: 'var(--tw-prose-links)',
  214. },
  215. 'h1 code': {
  216. color: 'inherit',
  217. },
  218. 'h2 code': {
  219. color: 'inherit',
  220. fontSize: '0.875em',
  221. },
  222. 'h3 code': {
  223. color: 'inherit',
  224. fontSize: '0.9em',
  225. },
  226. 'h4 code': {
  227. color: 'inherit',
  228. },
  229. 'blockquote code': {
  230. color: 'inherit',
  231. },
  232. 'thead': {
  233. color: 'var(--tw-prose-headings)',
  234. fontWeight: '600',
  235. borderBottomWidth: '1px',
  236. borderBottomColor: 'var(--tw-prose-th-borders)',
  237. },
  238. 'thead th': {
  239. verticalAlign: 'bottom',
  240. paddingRight: '0.5714286em',
  241. paddingBottom: '0.5714286em',
  242. paddingLeft: '0.5714286em',
  243. },
  244. 'tbody tr': {
  245. borderBottomWidth: '1px',
  246. borderBottomColor: 'var(--tw-prose-td-borders)',
  247. },
  248. 'tbody tr:last-child': {
  249. borderBottomWidth: '0',
  250. },
  251. 'tbody td': {
  252. verticalAlign: 'baseline',
  253. paddingTop: '0.5714286em',
  254. paddingRight: '0.5714286em',
  255. paddingBottom: '0.5714286em',
  256. paddingLeft: '0.5714286em',
  257. },
  258. p: {
  259. marginTop: '1.25em',
  260. marginBottom: '1.25em',
  261. },
  262. },
  263. },
  264. },
  265. },
  266. },
  267. plugins: [tailwindcssAnimate, typography],
  268. }