From the course: Vibe Coding Common Web Patterns into Tailwind CSS

Unlock this course with a free trial

Join today to access over 25,500 courses taught by industry experts.

Customizing Tailwind CSS configuration

Customizing Tailwind CSS configuration

From the course: Vibe Coding Common Web Patterns into Tailwind CSS

Start my 1-month free trial Buy for my team

Customizing Tailwind CSS configuration

“

- Understanding the Tailwind configuration file is essential for customizing styles and optimizing your workflow. This is a Tailwind config js file. It's simply an object with three properties, well, four, if I count the extend as a property within theme. Starting from the top, content is the path, or it's an array of paths of content that Tailwind build should consider when tree shaking and tree shaking is vital. Here's my FAQ component. I'm using gray 100, white, gray 700. There's no green or purple in this project. It wouldn't make sense for me to include CS definitions for those classes. So unused Tailwind classes are not built into my project. Back in my Tailwind config, I'm telling Tailwind to scan files of type js, jsx, ts, or tsx in the source path, and the double asterisks mean sub directories as well. Now, the theme extend properties are cool. If I have a brand color I want to use, or I have internal language for certain colors, I can extend Tailwind here. Copilot has some…

Contents