CODEWITHSUNDEEP
django-templatestailwind-cssviteflowbite
jxw
jxw

Reputation: 711

css file is being overwritten between vite and tailwindcss

In my Django project I need to both render some html content using tailwindcss and also in the same html template render React component using Vite. In this project I have a navbar from Flowbite, which seems to be overwritten by Vite with regard on its css style.

In my basetemplate I have

{% compress css %}
    <link rel="stylesheet" href="{% static 'tailwindcss/styles.css' %}">
    {% endcompress %}

The styles.css is being continuously watched and build using this command

npx @tailwindcss/cli -i ./static/tailwindcss/input.css -o ./static/tailwindcss/styles.css --watch

In the input.css I have

@import "tailwindcss";

To integrate flowbite into my project I have followed their instruction https://flowbite.com/docs/getting-started/django/

then beside from

npx @tailwindcss/cli -i ./static/tailwindcss/input.css -o ./static/tailwindcss/styles.css --watch

I am also running Vite with React. In my React app I have

import './../../static/tailwindcss/input.css'

which points it to the same input.css file that tailwind was using and it contains

@import "tailwindcss";

The reason I suspect that the vite is overwriting the css is upon rendering the html page I see the correct style for the Flowbite navbar for a very short while, before the style got changed. What is the best practice here when tailwindcss is needed for both without React in plain html tags and inside React?

Upvotes: 0

Views: 16

Answers (0)

Related Questions