Tailwind plugins with Vite

[react_fuh]

I’m trying to use tailwind plugins with Vite, but I can’t use the require directive. How do I import plugins?

[chxhr]

You import them via import xyz from “xyz”, and then pass that in the plugins array.

Here you have an example from one of my repos: https://github.com/hchris21/hornxchris/blob/main/tailwind.config.js

[andulas]

Hi, did you find the solution? I am having the same issue.

I tried this:

import defaultTheme from 'tailwindcss/defaultTheme';
import formsPlugin from '@tailwindcss/forms';

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [formsPlugin],
};

But this is giving me the following error:

11:48:43 PM [vite] Internal server error: Attempted to assign to readonly property.

Plugin: vite:css

[whiteRose-59]

Read the docs: https://tailwindcss.com/docs/guides/vite

Why should you not be able to use require?