A guide to configuring and customizing your Tailwind.
By default, Tailwind will look for an optional tailwind.config.js file at the root of your project where you can define any customizations.
The theme section is where you define your color palette, fonts, type scale, border sizes, breakpoints — anything related to the visual design of your site.
const colors = require('tailwindcss/colors');
module.exports = {
content: [
"./src/**/*.{html,js}",
"./src/assets/libs/*"
],
darkMode: ['class', '[data-mode="dark"]'],
theme: {
fontFamily: {
'public': ['"DM Sans", sans-serif'],
'heading': ['"Urbanist", sans-serif'],
'remix': ['remixicon']
},
container: {
center: true,
},
extend: {
fontSize: {
sm: '0.8125rem',//13px
base: '1.0625rem',//17px
15: '0.9375rem',//15px
16: '1rem',//16px
},
colors: {
'body': colors.slate[900],
'body-bg': colors.white,
custom: {
50: colors.orange[50],
100: colors.orange[100],
200: colors.orange[200],
300: colors.orange[300],
400: colors.orange[400],
500: colors.orange[500], // Using Tailwind's color palette
600: colors.orange[600],
700: colors.orange[700],
800: colors.orange[800],
900: colors.orange[900],
950: colors.orange[950],
},
'bastille': {
'50': '#f9f6f9',
'100': '#f5eef4',
'200': '#ecdee9',
'300': '#ddc4d8',
'400': '#c89ebe',
'500': '#b480a6', // Using Tailwind's color palette
'600': '#9e648b',
'700': '#855173',
'800': '#6f4560',
'900': '#5f3c52',
'950': '#261620',
},
red: {
50: colors.red[50],
100: colors.red[100],
200: colors.red[200],
300: colors.red[300],
400: colors.red[400],
500: colors.red[500], // Using Tailwind's color palette
600: colors.red[600],
700: colors.red[700],
800: colors.red[800],
900: colors.red[900],
950: colors.red[950],
},
green: {
50: "#EAFAF7",
100: "#D2F4EE",
200: "#A0E8DB",
300: "#56D7BF",
400: "#2DBDA3",
500: "#249782", // Using Tailwind's color palette
600: "#208875",
700: "#1C7767",
800: "#186355",
900: "#11463C",
950: "#0B2D27"
},
yellow: {
50: colors.yellow[50],
100: colors.yellow[100],
200: colors.yellow[200],
300: colors.yellow[300],
400: colors.yellow[400],
500: colors.yellow[500], // Using Tailwind's color palette
600: colors.yellow[600],
700: colors.yellow[700],
800: colors.yellow[800],
900: colors.yellow[900],
950: colors.yellow[950],
},
orange: {
50: colors.orange[50],
100: colors.orange[100],
200: colors.orange[200],
300: colors.orange[300],
400: colors.orange[400],
500: colors.orange[500], // Using Tailwind's color palette
600: colors.orange[600],
700: colors.orange[700],
800: colors.orange[800],
900: colors.orange[900],
950: colors.orange[950],
},
sky: {
50: colors.sky[50],
100: colors.sky[100],
200: colors.sky[200],
300: colors.sky[300],
400: colors.sky[400],
500: colors.sky[500], // Using Tailwind's color palette
600: colors.sky[600],
700: colors.sky[700],
800: colors.sky[800],
900: colors.sky[900],
950: colors.sky[950],
},
purple: {
50: colors.purple[50],
100: colors.purple[100],
200: colors.purple[200],
300: colors.purple[300],
400: colors.purple[400],
500: colors.purple[500], // Using Tailwind's color palette
600: colors.purple[600],
700: colors.purple[700],
800: colors.purple[800],
900: colors.purple[900],
950: colors.purple[950],
},
zink: {
'50': '#f9f6f9',
'100': '#f5eef4',
'200': '#ecdee9',
'300': '#ddc4d8',
'400': '#c89ebe',
'500': '#b480a6', // Using Tailwind's color palette
'600': '#9e648b',
'700': '#855173',
'800': '#6f4560',
'900': '#5f3c52',
'950': '#261620',
},
},
zIndex: {
'drawer': '1050',
},
backgroundImage: {
'home-main': "url('../images/home/main.jpg')",
'cta': "url('../images/cta.jpg')",
},
},
},
plugins: [
require('./plugins/headings.js'),
require('./plugins/buttons.js'),
require('./plugins/forms.js'),
require('./plugins/card.js'),
require('./plugins/drawer.js'),
// third party libraries
require('./plugins/swiper.js'),
]
}Learn more about the default theme and how to customize it in the theme configuration guide.
By default, Tailwind provides three font family utilities: a cross-browser sans-serif stack, a cross-browser serif stack, and a cross-browser monospaced stack. You can change, add, or remove these by editing the theme.fontFamily section of your Tailwind config.
module.exports = {
theme: {
fontFamily: {
'public': ['"DM Sans", sans-serif'],
'heading': ['"Urbanist", sans-serif'],
},
}
}You can configure your own custom set of font size utilities using the theme.fontSize section of your tailwind.config.js file.
module.exports = {
theme: {
extend: {
fontSize: {
base: '1.0625rem',//17px
}
}
}
}