How to configure @tailwindcss/vite with tailwind.config.js?

[leenyburger]

How do you configure tailwind when installed via vite?

Main issue -> tailwind.config.js is not being picked up

I started a new project following this tutorial -> https://evilmartians.com/chronicles/inertiajs-in-rails-a-new-era-of-effortless-integration

I installed tailwind using vite, and tailwind works fine.
However, it ignores the tailwind.config.js

vite.config.ts

import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
import { defineConfig } from 'vite'
import RubyPlugin from 'vite-plugin-ruby'
import path from 'path'

export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
    RubyPlugin(),
  ],
  optimizeDeps: {
    exclude: ['lucide-react'],
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'app/frontend')
    }
  }
})

In the root directory I also have a tailwind.config.js which is not being picked up.
tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./app/views/**/*.{html,html.erb,erb}",
    "./app/frontend/**/*.{js,jsx,ts,tsx}",
    "./app/components/**/*.{erb,rb}",
  ],
  theme: {
    extend: {
      colors: {
        primary: '#7C3AED',    // Violet-600
        secondary: '#EC4899',  // Pink-500
        accent: '#0EA5E9',     // Sky-500
        dark: '#1F2937',       // Gray-800
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
      },
      animation: {
        'bounce-slow': 'bounce 3s infinite',
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
  ],
}

I don't have any of the postcss stuff, I added it to try but it didn't make a difference so I removed it.

[leenyburger]

Turns out this is because installing tailwind with vite installed Tailwind 4, which no longer uses a tailwind.config.js file.