tailwind.config.cjs 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. /** @type {import('tailwindcss').Config} */
  2. module.exports = {
  3. content: ['./src/**/*.{html,js,svelte}', './node_modules/stdf/src/**/*.svelte', '../components/**/*.svelte'],
  4. theme: {
  5. colors: {
  6. blue: '#0B24FB',
  7. yellow: '#FFC043',
  8. primary: '#0B24FB',
  9. dark: '#FFC043',
  10. purple: '#7356BF',
  11. green: '#05944F',
  12. orange: '#FF6937',
  13. primaryBlack: '#09101D',
  14. black: '#000000',
  15. gray1: '#23262B',
  16. gray2: '#2A2B2F',
  17. gray3: '#303239',
  18. gray4: '#373940',
  19. gray5: '#414249',
  20. gray6: '#747B84',
  21. gray7: '#DADEE3',
  22. gray8: '#EBEEF2',
  23. gray9: '#F4F6F9',
  24. gray10: '#FAFAFB',
  25. success: '#11BB8D',
  26. warning: '#B95000',
  27. error: '#DA1414',
  28. info: '#2E5AAC',
  29. transparent: 'transparent',
  30. },
  31. extend: {
  32. colors: {
  33. white: '#fff',
  34. primaryBlack: '#09101D',
  35. black: '#000000',
  36. yellow: '#FFC043',
  37. },
  38. keyframes: {
  39. wiggle: {
  40. '0%, 100%': { transform: 'rotate(-3deg)' },
  41. '50%': { transform: 'rotate(3deg)' },
  42. },
  43. path: {
  44. '0%': { 'stroke-dashoffset': 400, fill: 'transparent' },
  45. '30%': { 'stroke-dashoffset': 0, fill: 'transparent' },
  46. '32%': { 'stroke-dashoffset': 0, fill: 'currentColor' },
  47. '33%': { opacity: 0 },
  48. '35%': { opacity: 1 },
  49. '37%': { opacity: 0 },
  50. '39%': { opacity: 1 },
  51. '40%': { 'stroke-dashoffset': 0, fill: 'currentColor' },
  52. '99%': { 'stroke-dashoffset': 0, fill: 'currentColor' },
  53. '100%': { 'stroke-dashoffset': 400, fill: 'transparent' },
  54. },
  55. },
  56. animation: {
  57. wiggle: 'wiggle 1s ease-in-out infinite',
  58. path: 'path 3s linear infinite',
  59. },
  60. },
  61. },
  62. darkMode: 'class',
  63. plugins: [],
  64. };