focusui/tailwind.config.js at main · akora/focusui · 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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
const plugin = require('tailwindcss/plugin')
const theme_config = require("./src/config/theme.json");

let fontPrimaryType, fontSecondaryType;
if (theme_config.fonts.font_family.primary) {
  fontPrimaryType = theme_config.fonts.font_family.primary_type;
}
if (theme_config.fonts.font_family.secondary) {
  fontSecondaryType = theme_config.fonts.font_family.secondary_type;
}


/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
  safelist: [
    { pattern: /^col-/ },
    ...theme_config.colors.flatMap((color) => [{ pattern: new RegExp(`bg-${color}`) }]),
    { pattern: /^btn/ }
  ],
  darkMode: "selector",
  theme: {
    container: {
      center: true,
      padding: "2rem",
    },
    extend: {
      colors: {
        ...theme_config.colors.reduce((acc, key) => {
          acc[key] = 'rgba(var(--' + key + '))';
          return acc;
        }, {}),
      },
      fontFamily: {
        primary: ["var(--font-primary)", fontPrimaryType],
        secondary: ["var(--font-secondary)", fontSecondaryType],
      },
      textShadow: {
        // --tw-shadow-color is not defined in tailwindcss by now
        sm: '0 0px 2px var(--tw-shadow-color)',
        DEFAULT: '0 0px 3px var(--tw-shadow-color)',
        lg: '0 0px 8px var(--tw-shadow-color)',
      },

      // Custom animations
      // Defined keyframes
      keyframes: {
        "fade-in": {
          '0%': { transform: 'translateY(15pt)', opacity: 0 },
          '100%': { transform: 'translateY(0pt)' },
        },
        "fade-out": {
          '0%': { transform: 'translateY(0pt)' },
          '100%': { transform: 'translateY(15pt)', opacity: 0 },
        },
        "dissappear": {
          '0%': { opacity: 1, visibility: 'visible' },
          '100%': { visibility: 'hidden', opacity: 0},
        },
      },
      // Defined animations
      animation: {
        "fade-in": 'fade-in 1s ease-in-out',
        "fade-out": 'fade-out 1s ease-in-out',
        "dissappear": 'dissappear 1.5s ease-in-out forwards',
      }
    },
  },
  plugins: [
    require("@tailwindcss/typography"),
    require("@tailwindcss/forms"),
    require("tailwind-bootstrap-grid")({
      generateContainer: false,
      gridGutterWidth: "2rem",
      gridGutters: {
        1: "0.25rem",
        2: "0.5rem",
        3: "1rem",
        4: "1.5rem",
        5: "3rem",
      },
    }),
    plugin(function ({ matchUtilities, theme }) {
      matchUtilities(
        {
          'text-shadow': (value) => ({
            textShadow: value,
          }),
        },
        { values: theme('textShadow') }
      )
    })
  ],
};