vue.jstailwind-cssflowbitetailwind-css-3

Cannot apply unknown utility class rounded-r-lg, but it's a valid TailwindCSS class

I've started a new project and wanted to use VueJS as frontend and TailwindCSS/FlowbiteVue for design. I followed the installation-instructions but always get the same error:

Internal server error: Cannot apply unknown utility class: rounded-r-lg

I'm not sure how to fix it. It only appears when I include the following file into my main.css:

@import '../../node_modules/flowbite-vue/dist/index.css';

In this index.css the class rounded-r-lg is assigned to some elements. But on the node_modules/tailwind-files I can't find any class named like rounded-r-lg.

Regarding to the official TailwindCSS Docs this is a valid class-name. I've tried several times to delete and install TailwindCSS and Flowbite, also setting up a complete new Vue project. But the error is still the same.

Does anyone have an idea?

Solution

  • Update

    Just a note: I wrote this answer in the early days of TailwindCSS v4, and it was valid at the time. Since then, Flowbite has released documentation with support for TailwindCSS v4 as well.

    Make sure that starting from v4, using @reference in a CSS module is required in order to access @apply.

    ./src/global.css

    @import "tailwindcss";

    ./src/components/app.module.css (or <style> blocks)

    @reference "tailwindcss"; /* include default TailwindCSS variables and utilities */

.hero {
  @apply rounded-r-lg;
}

    alternative with your main TailwindCSS settings:

    @reference "./../global.css";

.hero {
  @apply rounded-r-lg;
}

    Original

    The Flowbite documentation still recommends installing TailwindCSS v3. However, the documentation hasn't been updated with the release of TailwindCSS v4. The recommended npm install tailwindcss command will now install v4 instead of v3.

    To install TailwindCSS v3, you just need to modify this in the Flowbite steps or run the following afterwards:

    npm install tailwindcss@3