AI Set Up Tailwind for Me... and It Was Wrong

Recently, I was using Cursor to develop a site design and ran into a frustrating issue setting up Tailwind that took longer to debug than I’d like. Posting this here in case someone else runs into the same problem.

Cursor auto-generated my tailwind.config.js, and at first glance, everything looked fine. Most styles were applying correctly—except for my fonts. After some digging, I realized Cursor had used the Tailwind v3 configuration pattern instead of the newer Tailwind v4 approach.

The fix? Move the CSS-related configuration from tailwind.config.js into a separate CSS file. Tailwind’s v4 update post explains this in more detail here, but here's an example of what the new setup should look like:

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=DM+Serif+Display:ital@0;1&display=swap');

@theme {
  --font-sans: 'DM Sans', system-ui, sans-serif;
  --font-serif: 'DM Serif Display', ui-serif, Georgia, serif;
}

@import "tailwindcss";

The Bigger Lesson: AI Struggles with New Updates

Beyond this specific issue, there’s a broader takeaway: AI tools often struggle with major framework updates. Cursor generated a reasonable-looking config, but it was outdated for Tailwind v4. I’ve experience the same with differences between Rails 7 and Rails 8.

To mitigate this, I’ve added instructions to my Cursor rules to specify dependency versions explicitly. Whether this approach will consistently prevent similar issues remains to be seen, but it’s a step in the right direction.

If you’re using AI tools for dev work, it’s worth double-checking generated configs against the latest official documentation—especially after major version updates.

Have you run into similar issues with AI-assisted development? Let me know what’s worked for you.