昨天引入 component 後發現 html 有元件的節點，但 tailwind 對元件不起作用 Σ(っ°Д°;)っ
但是 tailwind 確實是可以在 playground 運行的…

也就是說，tailwind 沒有掃描到 module 內的 component…

所以我們要到 tailwind.config.js 進行設定!

// src/runtime/tailwind.config.ts
content: [
    './src/runtime/components/**/*.{vue,jsx,tsx}',
  ],

並告訴 module 讀取 src 內的 tailwind.config.js

// module.ts
    await installModule('@nuxtjs/tailwindcss', {
      configPath: resolver.resolve('./runtime', 'tailwind.config')
    })
   

如此就可以讓 tailwind 順利編譯放在 html 內的 css 了

但現在看起來還是不太對，寫在 .btn 的 css 並沒有載入

還記得之前把他另外整理成一隻檔案了嗎?

這次要透過呼叫 nuxt 方法把他載入

   async setup(_options, _nuxt) {
	    const resolver = createResolver(import.meta.url)
	
	   
	    await installModule('@nuxtjs/tailwindcss', {
	      configPath: resolver.resolve('./runtime', 'tailwind.config')
	    })
	   
	    _nuxt.options.css.push(resolver.resolve('./runtime/assets', 'css', 'style.css'))
    }

重新 dev 後就可以看到 button 成功引入囉 ٩(๑>◡<๑)۶

除了用上述方法引入 css 之外，也可以透過 installModule 引入
但要注意引入的 css 有包含 tailwind 的三樣基本設定

 await installModule('@nuxtjs/tailwindcss', {
      cssPath: resolver.resolve('./runtime/assets', 'css', 'style.css'),
      configPath: resolver.resolve('./runtime', 'tailwind.config')
    })

// style.css
@tailwind base;

@tailwind components;

@tailwind utilities;

小分享：

今天在工作的時候突然覺得某些區域的程式碼是靜態的
幾乎不會動到，短時間內還沒有另開檔案存放他們的需求

JavaSrcipt 就可以用

#region、#endregion 來把他們摺疊起來

// #region 選項區
const options = [
	//...這裡超級多行
]
// #endregion

呀 版面清爽多了～