search

nuxt / create-nuxt-app

Create Nuxt.js App in seconds.
MIT License
3.48k stars 429 forks source link

Tailwind.min.css overrides tailwind.css in my Nuxt app #875

Closed justinehell closed 2 years ago

justinehell commented 2 years ago

Version

create-nuxt-app: v3.7.1

Steps to reproduce

  1. Create Nuxt app

Create a nuxt app with npm init nuxt-app <app-name> and choose Tailwind CSS as UI framework My full config :

image

  1. Override fontFamily Tailwind class

Create tailwind.config.js at the root of the project like so image

What is Expected?

When I use my custom font (eg in my example font-sans) inside Tutorial.vue component, my custom font is successfully loaded and displayed

What is actually happening?

fontFamily class is overrided by the tailwind.min.css. Therefore, my custom font doesn't show up.

image

I found out after some research that tailwind.min.css is called inside the Tutorial.vue component.

A big thanks to hakim bhd that found the solution

Proposed solution

Is it possible to remove this line if we choose Tailwind as UI framework ?

<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.1.2/dist/tailwind.min.css" rel="stylesheet" />

justinehell commented 2 years ago

My bad I just saw that we are not supposed to work with the Tutorial.vue component. I close this issue