Tailwind.min.css 在我的 Nuxt 应用程序中覆盖 tailwind.css答案

【问题标题】：Tailwind.min.css overrides tailwind.css in my Nuxt appTailwind.min.css 在我的 Nuxt 应用程序中覆盖 tailwind.css
【发布时间】：2021-11-29 09:59:49
【问题描述】：

每当我尝试配置 Tailwind，以便它接受我的自定义字体时，它会用 tailwind.min.css 覆盖 tailwind.css 文件。因此，更改不会显示出来。

看，这些是我的文件。

// tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  purge: [
    './components/**/*.{vue,js}',

    './layouts/**/*.vue',

    './pages/**/*.vue',

    './plugins/**/*.{js,ts}',

    './nuxt.config.{js,ts}',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      fontFamily: {
        sans: ['Rubik', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

// nuxt.config.js
module.exports = {
  ...,
  css: ["~assets/css/tailwind.css"],
  ...,
}

/*@/assets/css/tailwind.css*/
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  @font-face {
    font-family: 'Rubik';
    src: url(../fonts/Rubik-Light.ttf);
    font-weight: 300;
  }
  @font-face {
    font-family: 'Rubik';
    src: url(../fonts/Rubik-Medium.ttf);
    font-weight: 500;
  }
  @font-face {
    font-family: 'Rubik';
    src: url(../fonts/Rubik-Regular.ttf);
    font-weight: 400;
  }
}

字体相对于tailwind.css位于正确的位置。

【问题讨论】：

这里的nuxt.config.js 配置是什么？
@kissu 第二个，这里：gist.github.com/sarrietav-dev/2cd090618baf720657ead92a45982388

标签： javascript css vue.js nuxt.js tailwind-css

【解决方案1】：

我通过使用新的字体系列（我将其命名为 Rubik）完成了这项工作，并在顶级 div 中使用了它：

/*assets/css/tailwind.css*/
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  @font-face {
    font-family: 'Rubik';
    src: url(../fonts/Rubik-Light.ttf);
    font-weight: 300;
  }
  @font-face {
    font-family: 'Rubik';
    src: url(../fonts/Rubik-Medium.ttf);
    font-weight: 500;
  }
  @font-face {
    font-family: 'Rubik';
    src: url(../fonts/Rubik-Regular.ttf);
    font-weight: 400;
  }
}

//tailwind.config.js
module.exports = {
  mode: 'jit',
  purge: [
    './components/**/*.{vue,js}',

    './layouts/**/*.vue',

    './pages/**/*.vue',

    './plugins/**/*.{js,ts}',

    './nuxt.config.{js,ts}',
  ],
  theme: {
    extend: {
      fontFamily: {
        rubik: ['Rubik', ...defaultTheme.fontFamily.sans],
      },
    },
  },
}

<!-- pages/index.vue -->
<template>
  <div class="font-rubik">
    <Tutorial />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({})
</script>

【讨论】：

【解决方案2】：

我今天遇到了这个问题，我打赌您使用“create-nuxt-app”命令创建了您的 nuxt 应用程序，并且您选择了 TailwindCSS 作为 UI 框架，并开始使用入门模板。

如果是这种情况，您会发现一个名为 tutorial.vue 的组件，该组件正在调用 tailwind.min.css 作为外部资源。

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

请删除它，一切都会按预期进行。

【讨论】：