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

  • 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