website-typo3/tailwind.config.js

const plugin = require('tailwindcss/plugin')
const tinycolor = require('tinycolor2')

module.exports = {
    future: {
        removeDeprecatedGapUtilities: true,
        purgeLayersByDefault: true,
    },
    experimental: {
        applyComplexClasses: true,
    },
    purge: {
        mode: 'layers',
        layers: ['components', 'utilities'],
        content: [
            './public/typo3conf/ext/ep_theme/Configuration/TypoScript/**/*.typoscript',
            './public/typo3conf/ext/ep_theme/Resources/Private/Layouts/**/*.html',
            './public/typo3conf/ext/ep_theme/Resources/Private/Partials/**/*.html',
            './public/typo3conf/ext/ep_theme/Resources/Private/Templates/**/*.html',
            './public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/**/*.js',
            './public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/**/*.vue',
            './public/typo3conf/ext/ep_theme/Classes/ViewHelpers/**/*.php',
        ],
    },
    theme: {
        container: {
            center: true,
            padding: '1rem',
        },
        fontFamily: {
            'sans': [ 'Lato', 'sans-serif' ],
        },
        customForms: theme => ({
            default: {
                'input, textarea, select, multiselect': {
                    paddingTop: theme('spacing.4'),
                    paddingBottom: theme('spacing.4'),
                    paddingLeft: theme('spacing.8'),
                    paddingRight: theme('spacing.8'),
                    borderColor: theme('colors.gray.500'),
                    borderRadius: undefined,
                    '&:focus': {
                        borderColor: undefined,
                        boxShadow: undefined,
                    },
                },
                'checkbox, radio': {
                    width: theme('spacing.6'),
                    height: theme('spacing.6'),
                    backgroundColor: theme('colors.white'),
                    borderColor: undefined,
                    '&:focus': {
                        borderColor: undefined,
                        boxShadow: undefined,
                    },
                    '&:checked': {
                        backgroundColor: theme('colors.ep.secondary'),
                        boxShadow: undefined,
                    },
                },
            },
            error: {
                'input, textarea, select, multiselect': {
                    color: theme('colors.red.500'),
                    borderColor: theme('colors.red.500'),
                }
            },
        }),
        extend: {
            colors: {
                'overlay': {
                    'black': tinycolor('#000000').setAlpha(0.85).toRgbString(),
                    'white': tinycolor('#ffffff').setAlpha(0.85).toRgbString(),
                },
                'ep': {
                    'primary': '#009fe3',
                    'secondary': '#f0bc44',
                    'primary-light': '#009fff',
                    'primary-medium': '#165883',
                    'primary-dark': '#18527B',
                    'primary-10': tinycolor('#009fe3').setAlpha(0.1).toRgbString(),
                    'primary-80': tinycolor('#009fe3').setAlpha(0.8).toRgbString(),
                },
                'sbw': {
                    'primary': '#f0bc44',
                    'secondary': '#ee525a',
                    'primary-dark': '#f0bc44',
                    'primary-10': tinycolor('#f0bc44').setAlpha(0.1).toRgbString(),
                    'primary-80': tinycolor('#f0bc44').setAlpha(0.8).toRgbString(),
                },
                'snz': {
                    'primary': '#82C3C6',
                    'secondary': '#f9c33d',
                    'primary-10': tinycolor('#82C3C6').setAlpha(0.1).toRgbString(),
                    'primary-80': tinycolor('#82C3C6').setAlpha(0.8).toRgbString(),
                },
                'uch': {
                    'primary': '#b5e400',
                    'secondary': '#19a3dc',
                    'primary-10': tinycolor('#b5e400').setAlpha(0.1).toRgbString(),
                    'primary-80': tinycolor('#b5e400').setAlpha(0.8).toRgbString(),
                },
            },
            height: {
                '96': '20rem',
                '128': '32rem',
            },
            inset: {
                '100': '100%',
                '1/2': '50%',
            },
            zIndex: {
                '100': 100,
            },
        },
    },
    variants: {
        backgroundColor: ({ after }) => after([ 'sbw', 'sbw-hover', 'snz', 'snz-hover', 'uch', 'uch-hover', 'even', 'odd' ]),
        textColor: ({ after }) => after([ 'sbw', 'sbw-hover', 'snz', 'snz-hover', 'uch', 'uch-hover' ]),
        borderColor: ({ after }) => after([ 'sbw','snz', 'uch' ]),
        display: ({ after }) => after(['group-hover']),
        visibility: ({ after }) => after(['group-hover']),
        opacity: ({ after }) => after(['group-hover']),
        rotate: ({ after }) => after(['group-hover']),
        flexDirection: ({ after }) => after(['even', 'odd']),
        padding: ({ after }) => after(['even', 'odd']),
    },
    plugins: [
        require('tailwindcss-alt')({
            variants: ['sbw', 'snz', 'uch'],
        }),
        require('@tailwindcss/custom-forms'),
        require('@tailwindcss/aspect-ratio'),
        plugin(function ({addVariant, e}) {
            addVariant('first-type', ({modifySelectors, separator}) => {
                modifySelectors(({className}) => {
                    return `.${e(`first-type${separator}${className}`)}:first-of-type`
                })
            })
        }),
        plugin(function ({addVariant, e}) {
            addVariant('last-type', ({modifySelectors, separator}) => {
                modifySelectors(({className}) => {
                    return `.${e(`last-type${separator}${className}`)}:last-of-type`
                })
            })
        }),
    ],
}