tailwind.config.cjs 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. /** @type {import('tailwindcss').Config} */
  2. const plugin = require('tailwindcss/plugin');
  3. const rotateX = plugin(function ({ addUtilities }) {
  4. addUtilities({
  5. '.rotate-y-180': {
  6. transform: 'rotateY(180deg)',
  7. },
  8. });
  9. });
  10. module.exports = {
  11. content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  12. darkMode: 'class',
  13. theme: {
  14. container: {
  15. center: true,
  16. },
  17. extend: {
  18. colors: {
  19. primary: {
  20. DEFAULT: '#4361ee',
  21. light: '#eaf1ff',
  22. 'dark-light': 'rgba(67,97,238,.15)',
  23. },
  24. secondary: {
  25. DEFAULT: '#805dca',
  26. light: '#ebe4f7',
  27. 'dark-light': 'rgb(128 93 202 / 15%)',
  28. },
  29. success: {
  30. DEFAULT: '#00ab55',
  31. light: '#ddf5f0',
  32. 'dark-light': 'rgba(0,171,85,.15)',
  33. },
  34. danger: {
  35. DEFAULT: '#e7515a',
  36. light: '#fff5f5',
  37. 'dark-light': 'rgba(231,81,90,.15)',
  38. },
  39. warning: {
  40. DEFAULT: '#e2a03f',
  41. light: '#fff9ed',
  42. 'dark-light': 'rgba(226,160,63,.15)',
  43. },
  44. info: {
  45. DEFAULT: '#2196f3',
  46. light: '#e7f7ff',
  47. 'dark-light': 'rgba(33,150,243,.15)',
  48. },
  49. dark: {
  50. DEFAULT: '#3b3f5c',
  51. light: '#eaeaec',
  52. 'dark-light': 'rgba(59,63,92,.15)',
  53. },
  54. black: {
  55. DEFAULT: '#0e1726',
  56. light: '#e3e4eb',
  57. 'dark-light': 'rgba(14,23,38,.15)',
  58. },
  59. white: {
  60. DEFAULT: '#ffffff',
  61. light: '#e0e6ed',
  62. dark: '#888ea8',
  63. },
  64. },
  65. fontFamily: {
  66. nunito: ['Nunito', 'sans-serif'],
  67. },
  68. spacing: {
  69. 4.5: '18px',
  70. },
  71. boxShadow: {
  72. '3xl': '0 2px 2px rgb(224 230 237 / 46%), 1px 6px 7px rgb(224 230 237 / 46%)',
  73. },
  74. typography: ({ theme }) => ({
  75. DEFAULT: {
  76. css: {
  77. '--tw-prose-invert-headings': theme('colors.white.dark'),
  78. '--tw-prose-invert-links': theme('colors.white.dark'),
  79. h1: { fontSize: '40px', marginBottom: '0.5rem', marginTop: 0 },
  80. h2: { fontSize: '32px', marginBottom: '0.5rem', marginTop: 0 },
  81. h3: { fontSize: '28px', marginBottom: '0.5rem', marginTop: 0 },
  82. h4: { fontSize: '24px', marginBottom: '0.5rem', marginTop: 0 },
  83. h5: { fontSize: '20px', marginBottom: '0.5rem', marginTop: 0 },
  84. h6: { fontSize: '16px', marginBottom: '0.5rem', marginTop: 0 },
  85. p: { marginBottom: '0.5rem' },
  86. li: { margin: 0 },
  87. img: { margin: 0 },
  88. },
  89. },
  90. }),
  91. },
  92. },
  93. plugins: [
  94. require('@tailwindcss/forms')({
  95. strategy: 'class',
  96. }),
  97. require('@tailwindcss/typography'),
  98. rotateX,
  99. ],
  100. };