The first line sets up the required variables. In this case, we're using the default Tailwindcss theme.
Next, we declare the content block that will hold all of our Tailwindcss files. We also declare a theme object here that will hold all of our customization for the theme.
We then define the color variables. These variables will be used to colors all our content. We also define the typography variable which will be used to style our text.
Finally, we declare the plugins and variants variables. These variables will hold the plugin and variant definitions, respectively.
const { fontFamily } = require(`tailwindcss/defaultTheme`)
const colors = require('tailwindcss/colors')
module.exports = {
content: ['./src/**/*.{html,js,jsx}'],
theme: {
extend: {
fontFamily: {
sans: ['Fira Sans', ...fontFamily.sans],
},
screens: {
xs: '420px',
sm: '576px',
md: '768px',
lg: '992px',
xl: '1280px',
'2xl': '1440px',
},
typography: (theme) => ({
DEFAULT: {
css: {
a: {
color: theme('colors.current'),
},
},
},
}),
},
colors: {
inherit: 'inherit',
transparent: 'transparent',
current: 'currentColor',
black: '#000000',
white: '#ffffff',
gray: colors.slate,
primary: colors.indigo,
secondary: colors.rose,
tertiary: colors.emerald,
},
},
plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
variants: {
extend: {},
},
}