Effsemble-component/tailwind.config.js at master · alphajwc/Effsemble-component · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
/** @type {import('tailwindcss').Config} */

module.exports = {

  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx}",
    "./src/components/**/*.{js,ts,jsx,tsx}",
    "./src/blocks/**/*.{js,ts,jsx,tsx}"
  ],
  mode: 'jit',
  darkMode: 'class',
  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
      '3xl': '1920px',
      '4xl': '2560px',
      '5xl': '3840px',
    },
    extend: {
      animation: {
        fadeIn: 'fadeIn 0.5s linear',
        slide: 'slide 0.5s linear',
        translateAndHide: 'translateAndHide 1s ease-in-out forwards',
      },
      fontFamily: {
        sans: ['Poppins', 'sans-serif'],
      },

      keyframes: {
        fadeIn: {
          '0%': { opacity:'0' },
          '20%': { opacity:'0.2' },
          '50%': { opacity:'0.5' },
          '80%': { opacity:'0.8' },
          '100%': { opacity:'1'},
        },
        slide:{
          '0': {transform: 'translateX(100%)'},
          '100%': {transform: 'translateX(-100%)'}
        },
        translateAndHide: {
          '0%': {
            transform: 'translateX(0%)',
          },
          '100%': {
            transform: 'translateX(-100%)',
            visibility: 'hidden',
          },
        },

      },
      transitionProperty: {
        'max-height': 'max-height',
        'height':'height',
        'opacity':'opacity',
      },
    }
  },

  plugins: [require('tailwindcss'), require('autoprefixer')],
}