Configuration file structure in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the main purpose of the Tailwind CSS configuration file?

The Tailwind CSS configuration file lets you customize default styles, add new colors, fonts, and control how Tailwind generates CSS. It helps you make Tailwind fit your project's design needs.

beginner

Which file name is commonly used for Tailwind CSS configuration?

The common file name is tailwind.config.js. It is a JavaScript file where you define your custom settings for Tailwind.

intermediate

In the Tailwind config file, what is the purpose of the content array?

The <code>content</code> array tells Tailwind which files to scan for class names. This helps Tailwind generate only the CSS you actually use, keeping your styles small and fast.

intermediate

What does the theme section in the Tailwind config file control?

The theme section lets you customize design tokens like colors, spacing, fonts, and more. You can add new values or override defaults to match your design style.

intermediate

How do you extend the default Tailwind theme without replacing it?

You use the extend key inside the theme section. This adds your custom values while keeping the original defaults intact.

What file does Tailwind CSS use by default for configuration?

A style.config.js

B tailwind.css

C config.json

D tailwind.config.js

Tailwind uses tailwind.config.js as its default configuration file.

What is the role of the content array in the Tailwind config file?

A To set font sizes

B To list files Tailwind scans for class names

C To define custom colors

D To import external CSS files

The content array tells Tailwind which files to scan to find CSS classes you use.

How do you add new colors to Tailwind without removing the default colors?

A Use the <code>extend</code> key inside <code>theme</code>

B Replace the <code>colors</code> key directly

C Add colors in the <code>content</code> array

D Modify the <code>plugins</code> section

Using extend inside theme adds new colors while keeping defaults.

Which language is used to write the Tailwind config file?

A JavaScript

B JSON

C CSS

D HTML

Tailwind config files are JavaScript files, allowing dynamic customization.

What happens if you do not specify the content array in Tailwind config?

A Tailwind uses default content paths automatically

B Tailwind will not generate any CSS

C Tailwind generates all CSS classes, making file size large

D Tailwind throws an error and stops

Without content, Tailwind includes all classes, increasing CSS size.

Explain the structure of a basic Tailwind CSS configuration file and its main sections.

Think about how Tailwind knows which files to scan and how you customize styles.

Describe how you can customize colors in Tailwind without losing the default color palette.

Focus on the extend key inside the theme object.

Practice

1. What is the main purpose of the content array in the Tailwind configuration file?

easy

A. To tell Tailwind which files to scan for class names

B. To define custom colors and fonts

C. To set the default font size for the project

D. To list plugins used by Tailwind

Solution

1. Step 1: Understand the role of content

   The content array lists files where Tailwind looks for class names to generate styles.

2. Step 2: Differentiate from other config parts

   Colors and fonts are set under theme.extend, not content.

3. Final Answer:

   To tell Tailwind which files to scan for class names -> Option A

4. Quick Check:

   content = files to scan [OK]

Hint: Remember: content = files Tailwind scans for classes [OK]

Common Mistakes:

• Confusing content with theme.extend
• Thinking content sets colors or fonts
• Assuming content lists plugins

2. Which of the following is the correct way to extend the color palette in tailwind.config.js?

easy

A. "colors: { extend: { primary: '#123456' } }"

B. "theme: { colors: { primary: '#123456' } }"

C. "extend: { theme: { colors: { primary: '#123456' } } }"

D. "theme: { extend: { colors: { primary: '#123456' } } }"

Solution

1. Step 1: Identify correct nesting for extending theme

   To add or change colors without overwriting defaults, use theme.extend.colors.

2. Step 2: Check each option's structure

   "theme: { extend: { colors: { primary: '#123456' } } }" correctly nests colors inside extend inside theme.

3. Final Answer:

   "theme: { extend: { colors: { primary: '#123456' } } }" -> Option D

4. Quick Check:

   Extend colors inside theme.extend [OK]

Hint: Use theme.extend to add colors, not theme alone [OK]

Common Mistakes:

• Putting colors directly under theme (overwrites defaults)
• Misplacing extend outside theme
• Wrong nesting order

3. Given this tailwind.config.js snippet, what will be the background color class for the custom color?

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: '#1a202c'
      }
    }
  }
}

medium

A. bg-custom-brand

B. background-brand

C. bg-brand

D. brand-bg

Solution

1. Step 1: Understand Tailwind color class naming

   Custom colors added under colors get classes like bg-[colorName] for backgrounds.

2. Step 2: Match color name to class

   The color name is brand, so background class is bg-brand.

3. Final Answer:

   bg-brand -> Option C

4. Quick Check:

   Custom color 'brand' -> class 'bg-brand' [OK]

Hint: Custom colors use bg-[name] for backgrounds [OK]

Common Mistakes:

• Using wrong prefix like background- or brand-bg
• Adding extra words like custom
• Confusing text color with background color classes

4. Identify the error in this Tailwind config snippet:

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      primary: '#ff0000'
    },
    extend: {
      fontFamily: {
        sans: ['Arial', 'sans-serif']
      }
    }
  }
}

medium

A. content array syntax is incorrect

B. Colors should be inside extend, not directly under theme

C. fontFamily should not be inside extend

D. Missing comma after colors object

Solution

1. Step 1: Check placement of colors in config

   Directly placing colors under theme overwrites default colors, usually we extend them inside theme.extend.

2. Step 2: Verify other parts

   Content array syntax is correct, fontFamily can be extended inside extend, commas are properly placed.

3. Final Answer:

   Colors should be inside extend, not directly under theme -> Option B

4. Quick Check:

   Extend colors to avoid overwriting defaults [OK]

Hint: Put colors inside theme.extend to keep defaults [OK]

Common Mistakes:

• Placing colors directly under theme overwrites defaults
• Thinking content syntax is wrong
• Misplacing fontFamily outside extend

5. You want to add a new font family called heading and a custom color accent without removing Tailwind's defaults. Which config structure correctly achieves this?

hard

A. module.exports = {
theme: {
extend: {
fontFamily: { heading: ['Georgia', 'serif'] },
colors: { accent: '#ff6600' }
}
}
}

B. module.exports = {
extend: {
theme: {
fontFamily: { heading: ['Georgia', 'serif'] },
colors: { accent: '#ff6600' }
}
}
}

C. module.exports = {
theme: {
fontFamily: { heading: ['Georgia', 'serif'] },
colors: { accent: '#ff6600' }
}
}

D. module.exports = {
content: ['./src/**/*.{html,js}'],
theme: {
fontFamily: { heading: ['Georgia', 'serif'] },
extend: { colors: { accent: '#ff6600' } }
}
}

Solution

1. Step 1: Understand how to add without removing defaults

   To add fonts and colors without removing defaults, place them inside theme.extend.

2. Step 2: Check each option's structure

   module.exports = {
     theme: {
       extend: {
         fontFamily: { heading: ['Georgia', 'serif'] },
         colors: { accent: '#ff6600' }
       }
     }
   }

   correctly puts both fontFamily and colors inside extend under theme.

3. Final Answer:

   module.exports = { theme: { extend: { fontFamily: { heading: ['Georgia', 'serif'] }, colors: { accent: '#ff6600' } } } } -> Option A

4. Quick Check:

   Use theme.extend for adding fonts and colors [OK]

Hint: Always add new styles inside theme.extend to keep defaults [OK]

Common Mistakes:

• Adding new styles directly under theme (overwrites defaults)
• Misplacing extend outside theme
• Splitting fontFamily and colors incorrectly