@vubrussel/vub_tailwind/plugin.js

Vue and Tailwind CSS based frontend components with VUB specific layout.

const plugin = require('tailwindcss/plugin')

const vubTailwindConfig = {
    theme: {
        container: {
            center: true,
        },
        fontFamily: {
            sans: ['roboto'],
        },
        extend: {
            colors: {
                orange: '#e36539',
                lightorange: '#ff812d',
                blue: '#223f7a',
                lightblue: '#37589d',
                softblue: '#e8f2f2',
                white: '#ffffff',
                smokewhite: '#f3f3f3',
                black: '#000000',
                grey: '#7e7e7e',
                lightgrey: '#d7d7d7',
                red: '#cb0909',
                green: '#2a8f06',
                link: '#288bea',
                transparent: 'rgba(255,255,255,0)',
                darkTransparent: 'rgba(30, 30, 30, 0.85)',
                darkVeryTransparent: 'rgba(30, 30, 30, 0.5)',
                lightTransparent: 'rgba(255, 255, 255, 0.3)',
                orangeTransparent: 'rgba(255,129,45,0.1)'
            },
            fontFamily: {
                itc: ['itc'],
                itcBold: ['itc-bold'],
                roboto: ['roboto'],
                robotoBold: ['roboto-medium'],
                surveyTitle: ['Corbel Light', 'sans-serif'],
            },
            fontSize: {
                'xxs': '0.6rem',
            },
            transitionProperty: {
                'width': 'width'
            },
            animation: {
                'spin-ease': 'spin 1s ease-in-out infinite',
            },
            boxShadow: {
                refBox: '0px 4px 30px -13px rgba(0,0,0,0.4)',
                overviewCard: '0px 4px 16px -7px rgba(0,0,0,0.3)'
            }
        }
    }
};

module.exports = plugin(() => {}, vubTailwindConfig);