Tailwind CSS Customization

Customizing Tailwind configuration

Config File

// tailwind.config.js
module.exports = {
    theme: {
        extend: { }
    }
}

Extend Colors

theme: {
    extend: {
        colors: {
            'primary': '#3490dc',
            'secondary': '#ffed4e'
        }
    }
}

Extend Spacing

theme: {
    extend: {
        spacing: {
            '128': '32rem',
            '144': '36rem'
        }
    }
}

Custom Fonts

theme: {
    extend: {
        fontFamily: {
            'sans': ['Inter', 'sans-serif']
        }
    }
}

Purge CSS

content: [
    './src/**/*.{html,js}',
    './index.html'
] # remove unused CSS

Plugins

plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography')
]