Tailwind CSS v4

[Fantros]

Hello, I wonder if the project will be made compatible with Tailwind CSS v4?

[Victorcassiano]

Someone to pay a little attention here?

[lordfre]

I really wish there was tailwind 4 support.

[budaii79]

At first glance it works. You have to use in the css file the @config directive from tailwind v4 and to put there the path to tailwind.config where you have warped everything withMT.

[MeSuDDen]

I managed to make tailwind v4 friends with MTv3, but I had to create tailwind.config.ts and refer to it in index.css. I couldn't find another way(

With this connection, intellisense does not work for me, although as I know now this is a common problem with Tailwind v4

index.css

@import "tailwindcss";
@config "../tailwind.config.ts";

tailwind.config.ts

import { mtConfig } from "@material-tailwind/react";

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        "./index.html",
        "./src/**/*.{js,ts,jsx,tsx}",
        "./node_modules/@material-tailwind/react/**/*.{js,ts,jsx,tsx}",
    ]
}

[Alxmerino]

I'm still banging my head to get this to work with tailwind4, I tried the above approach but I'm getting this error

  3354 |   }
  3355 |   .\[\&_data-slot\=icon\]\:h-5 {
> 3356 |     & data-slot=icon {
       |                 ^
  3357 |       height: calc(var(--spacing) * 5);
  3358 |     }
  3359 |   }

Unexpected token Delim('=') at [project]/src/app/globals.css:3355:16

[sonewman]

Found this problem this morning