0
386
VisualizaçõesTailwind.min.css anula tailwind.css en mi aplicación Nuxt
Cada vez que intento configurar Tailwind para que acepte mi fuente personalizada, anula el archivo tailwind.css con tailwind.min.css . Por lo tanto, los cambios no se muestran.
Mira, estos son mis archivos.
// 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; } }Las fuentes están ubicadas en el lugar correcto en relación con tailwind.css.
2 Respostas
Responde à pergunta0
Revisé este problema hoy, apuesto a que creó su aplicación nuxt usando el comando "create-nuxt-app", eligió TailwindCSS como marco de interfaz de usuario y comenzó a trabajar en la plantilla de inicio.
si este es el caso, encontrará un componente llamado tutorial.vue, ese componente está llamando a tailwind.min.css como un recurso externo.
<link> href="https://cdn.jsdelivr.net/npm/tailwindcss@2.1.2/dist/tailwind.min.css" rel="stylesheet">elimínelo y todo funcionará como se espera.
0
Hice este trabajo usando una nueva familia de fuentes (la llamé Rubik) y la usé en un div de nivel superior:
/*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>