我正在嘗試開發一些組件，供我們在 Storyblok 中的內容編輯器使用，并且有一個用例，我們希望通過來自 Storyblok 組件的道具來定義布局屬性（使用 Tailwind 的類）。
例如，
我width通過 storyblok 傳遞道具，w-1/2其值為 Tailwind 類。正如您在右側看到的那樣，該類很好地應用于元素，但對頁面沒有實際影響。我已經對許多其他類進行了同樣的嘗試（對于背景或邊框顏色或文本樣式等，嘗試使用 Tailwind 類作為來自 Storyblok 的道具，但沒有奏效）。
我唯一的猜測是 Nuxt 是一個服務器端應用程式，CSS 是在構建時編譯的，因此任何系結到 DOM 的新類都不會反映它們所代表的實際 CSS。這是正確的嗎？如果是，有沒有辦法讓這件事發生并發揮作用？
組件的代碼就widthSetter這么簡單
<template>
{{blok.width}}
<div v-editable="blok" :>
<component
v-for="value in blok.blocks"
:key="value._uid"
:is="value.component"
:blok="value"
/>
</div>
</template>
<script lang="ts" setup>
const props = defineProps({
blok: {
type: Object,
required: true,
},
})
</script>
uj5u.com熱心網友回復：
您需要添加完整的類名稱。
由于w-1/2您的代碼中沒有，TW 不會生成該類。
您可以通過將類添加到 safelist來解決此問題。
檔案：https ://tailwindcss.com/docs/content-configuration#safelisting-classes
module.exports = {
safelist: ['w-1/2'],
//...
}
然后w-1/2無論它是否出現在您的代碼中，都會生成實用程式。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/418945.html
標籤：