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: {},
    Codiga Logo
    Codiga Hub
    • Rulesets
    • Playground
    • Snippets
    • Cookbooks
    soc-2 icon

    We are SOC-2 Compliance Certified

    G2 high performer medal

    Codiga – All rights reserved 2022.