tailwind.config.js 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. const defaultTheme = require('tailwindcss/defaultTheme');
  2. /** @type {import('tailwindcss').Config} */
  3. module.exports = {
  4. content: [
  5. './pages/**/*.{js,ts,jsx,tsx,mdx}',
  6. './components/**/*.{js,ts,jsx,tsx,mdx}',
  7. './new-components/**/*.{js,ts,jsx,tsx,mdx}',
  8. './app/**/*.{js,ts,jsx,tsx,mdx}',
  9. ],
  10. theme: {
  11. extend: {
  12. fontFamily: {
  13. sans: ['"Josefin Sans"', ...defaultTheme.fontFamily.sans],
  14. },
  15. colors: {
  16. theme: {
  17. primary: '#0069fe',
  18. light: '#f7f7f7',
  19. dark: '#151622',
  20. 'dark-container': '#232734',
  21. success: '#52C41A',
  22. error: '#FF4D4F',
  23. warning: '#FAAD14',
  24. },
  25. gradientL: '#00DAEF',
  26. gradientR: '#105EFF',
  27. },
  28. backgroundColor: {
  29. bar: '#e0e7f2',
  30. },
  31. textColor: {
  32. default: '#0C75FC',
  33. },
  34. backgroundImage: {
  35. 'gradient-light': "url('/images/bg.png')",
  36. 'gradient-dark': 'url("/images/bg_dark.png")',
  37. 'button-gradient': 'linear-gradient(to right, theme("colors.gradientL"), theme("colors.gradientR"))',
  38. },
  39. keyframes: {
  40. pulse1: {
  41. '0%, 100%': { transform: 'scale(1)', backgroundColor: '#bdc0c4' },
  42. '33.333%': { transform: 'scale(1.5)', backgroundColor: '#525964' },
  43. },
  44. pulse2: {
  45. '0%, 100%': { transform: 'scale(1)', backgroundColor: '#bdc0c4' },
  46. '33.333%': { transform: 'scale(1.0)', backgroundColor: '#bdc0c4' },
  47. '66.666%': { transform: 'scale(1.5)', backgroundColor: '#525964' },
  48. },
  49. pulse3: {
  50. '0%, 66.666%': { transform: 'scale(1)', backgroundColor: '##bdc0c4' },
  51. '100%': { transform: 'scale(1.5)', backgroundColor: '#525964' },
  52. },
  53. },
  54. animation: {
  55. pulse1: 'pulse1 1.2s infinite',
  56. pulse2: 'pulse2 1.2s infinite',
  57. pulse3: 'pulse3 1.2s infinite',
  58. },
  59. },
  60. },
  61. important: true,
  62. darkMode: 'class',
  63. /**
  64. * @see https://www.tailwindcss-animated.com/configurator.html
  65. */
  66. plugins: [require('tailwindcss-animated')],
  67. };