Configuration File Basics

The default configuration file of Tailwind CSS provides the baseline settings that Tailwind uses when you start a new project. It's automatically created when you initialize a new Tailwind project using tools like npx tailwindcss init or when you install Tailwind via npm/yarn.

Configuaration File of Tailwind:

// tailwind.config.js
module.exports = {
 mode: 'jit',
 purge: [], 
 darkMode: false,
 theme: {
   extend: {},
 },
 variants: {
   extend: {},
 },
 plugins: [], 
}

1. mode:

Tailwind introduced Just-in-Time (JIT) mode to compile only the styles that are actually used in your project. This makes the compilation process faster.
By default, it's set to 'jit'.

2. purge:

This is an array of files or globs that Tailwind will search through to find what classes are being used in your project.
By default, it's an empty array [], meaning no files are being purged by default.

3. darkMode:

It allows you to enable dark mode variants for utilities like text color, background color, border color, etc.
By default, it's set to false.

4. theme:

This is where you can extend or customize Tailwind's default theme.
By default, it's an empty extend object {}.

5. variants:

Variants are different styles that can be applied to utilities, like hover, focus, active, etc.
By default, it's an empty extend object {}.

6. plugins:

Tailwind allows you to extend its functionality with plugins.
By default, it's an empty array [].