Tailwind Config File (`tailwind.config.js`)

1. Creating the Config File

Generate the file using the CLI:

npx tailwindcss init
            

This will create a minimal config file:

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}
            

2. Specify Content Sources

Update the content array with paths to your HTML/JS files so Tailwind can purge unused styles:

content: [
  "./index.html",
  "./src/**/*.{js,ts,jsx,tsx,php}"
],
            

3. Customizing the Theme

You can add custom colors, spacing, fonts, and more inside theme.extend:

theme: {
  extend: {
    colors: {
      primary: '#1D4ED8',
      secondary: '#9333EA',
    },
    spacing: {
      '72': '18rem',
      '84': '21rem',
    },
    fontFamily: {
      sans: ['Inter', 'sans-serif'],
    }
  }
}
            

4. Dark Mode Settings

Enable dark mode using either 'media' or 'class' strategy:

darkMode: 'class', // or 'media'
            

Use dark: utilities in your HTML to style for dark mode.

5. Adding Plugins

Add official or custom plugins under the plugins array:

plugins: [
  require('@tailwindcss/forms'),
  require('@tailwindcss/typography'),
]
            

Conclusion

The Tailwind config file is a powerful way to customize the design system for your project. Tailor every aspect of your styles while keeping your HTML clean and consistent.