Tailwind CLI and Configuration File

1. What is Tailwind CLI?

Tailwind CLI is a command-line tool for processing your input CSS file with Tailwind’s directives into a final output CSS. It's a great way to use Tailwind without setting up complex build tools.

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
            

This tells Tailwind to watch your input CSS and update the output automatically when changes occur.

2. Creating a Configuration File

To enable customization (themes, plugins, variants), create a Tailwind configuration file:

npx tailwindcss init
            

This generates a basic tailwind.config.js file:

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

3. Customizing Your Tailwind Build

You can add paths to your HTML/JS/PHP files so Tailwind only includes used styles:

module.exports = {
  content: ["./*.html", "./src/**/*.{js,ts,php}"],
  theme: {
    extend: {
      colors: {
        primary: '#0f172a',
      },
      spacing: {
        '128': '32rem',
      },
    },
  },
  plugins: [],
}
            

This makes your CSS smaller, faster, and customized to your project.

4. Benefits of Configuration

• Extend default spacing, colors, fonts
• Add custom breakpoints and media queries
• Define dark mode strategy
• Install and configure plugins (forms, typography, etc.)
• Remove unused styles with PurgeCSS

Conclusion

Using the Tailwind CLI and configuration file unlocks powerful customization and performance benefits. It’s the foundation for building scalable, maintainable Tailwind-based UI systems.