Skip to main content

tailwind.config.cjs ↔ to config tailwind behavior (colors/plugins/etc). root dir of project

aka tailwindconfigjs

content: string[]​

MUST to set file/folder to scan via Glob. set entry _index.html & any script files using Tailwind

mode: "jit"​

to OPT-IN JIT mode to compile CSS on-the-fly for faster built times. in dev preview - will likely default in future

purge: []​

to set Glob Pattern to remove unused CSS styles from final bundle

// import colors from "tailwindcss/colors"

list of Utility Class reference names under​

tailwindcss.com/docs/theme#configuration reference

extend utility class in theme section next with extend object

module.exports = {
  theme: {
    extend: {
      // Adds a new breakpoint in addition to the default breakpoints
      screens: {
        '3xl': '1600px',
      }
    }
  }
}

References​

  1. setup [**_tailwind.config.cjs_**](tailwind-config-cjs) ↔ add Glob to include/exclude dirpath/filetype & define custom utilities
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

  1. tailwindcss-cli init -p ↔ to gen tailwind.config.cjs & postcss.config.js (if undefined)

  2. npx tailwindcss-cli@latest init ↔ to autogen tailwind.config.cjs