Tailwind.config.js

const colors = require('tailwindcss/colors')
const defaultTheme = require('tailwindcss/defaultTheme')
const colorVariable = require('@mertasan/tailwindcss-variables/colorVariable')

const primary = '#005aff'
const primaryLight = '#008CFF'
// const secondary = '#1e1e1e'
const secondary = '#1E293B'
// const secondary = '#232323'
const tertiary = '#F1F5F9'
const borderRadius = '0.45rem'

module.exports = {
    mode: 'jit',
    content: [
        './resources/views/**/*.blade.php', './resources/js/**/*.vue'
    ],
    darkMode: 'class',
    theme: {
        screens: {
            xs: '475px',
            ...defaultTheme.screens
        },
        variables: {
            DEFAULT: {
                colors: {
                    primary: primary,
                    'primary-light': primaryLight,
                    secondary: secondary,
                    tertiary: tertiary
                },
                'border-radius': {
                    default: borderRadius
                }
            }
        },
        extend: {
            extend: {
                transitionDuration: {
                    0: '0ms'
                }
            },
            borderRadius: {
                default: 'var(--border-radius-default)'
            },
            colors: {
                primary: {
                    DEFAULT: colorVariable('--colors-primary')
                },
                'primary-light': {
                    DEFAULT: colorVariable('--colors-primary-light')
                },
                secondary: {
                    DEFAULT: colorVariable('--colors-secondary')
                },
                tertiary: {
                    DEFAULT: colorVariable('--colors-tertiary')
                }
            },
            ringColor: {
                DEFAULT: colorVariable('--colors-primary')
            },
            fontFamily: {
                heading: ['Gilroy', 'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'],
                'heading-thin': ['Gilroy Thin', 'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'],
                body: ['Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'sans-serif']
            },
            typography: {
                DEFAULT: {
                    css: {
                        a: null,
                        strong: null
                    }
                }
            }
        },
        aspectRatio: {
            none: 0,
            square: [1, 1],
            '16/9': [16, 9]
        }
    },

    plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography'),
        require('tailwindcss-aspect-ratio'),
        require('@mertasan/tailwindcss-variables')({
            colorVariables: true
        }),
        require('tailwindcss-scrims')({
            directions: {
                t: 'to bottom',
                b: 'to top'
            },
            distances: {
                '1/4': '25%',
                '1/3': '33.33333%',
                '1/2': '50%',
                '2/3': '66.66666%',
                '3/4': '75%',
                '4/5': '80%'
            },
            colors: {
                default: ['rgba(0, 0, 0, 0.5)', 'rgba(0, 0, 0, 0)'],
                white: ['rgba(255, 255, 255, 0.8)', 'rgba(0, 0, 0, 0)']
            },
            variants: ['responsive', 'hover']
        })
    ]
}