將Tailwind.css添加到Vue.js項目后，部分類沒有效果

Question

我正在嘗試將 Tailwind.css 添加到 Vue.js 項目。 有很多關於如何執行此操作的資源，其中大部分遵循與此視頻相同的路徑。 為了確保我處於與視頻中相同的條件下，我使用帶有默認預設的vue-cli從頭開始創建了一個 Vue 應用程序。 完成此步驟后，我執行了以下操作：

• npm install tailwind.css
• 創建src/styles/tailwind.css
• 將以下內容添加到 css 文件中：

@tailwind base; 
@tailwind components;
@tailwind utilities;

• 調用npx tailwind init在項目根目錄創建一個tailwind.config.js文件
• 在項目的根目錄下創建postcss.config.js ，並將以下內容添加到該文件中：

module.exports = {
  plugins: [require("tailwindcss"), require("autoprefixer")],
};

• 將自定義顏色添加到tailwind.config.js文件：

module.exports = {   
  theme: {
    colors: {
      "awesome-color": "#56b890",
    },
    extend: {},
  },   
  variants: {},   
  plugins: [], 
};

• 向vue-cli生成的HelloWorld.vue組件添加一個簡單的<p>元素
• 嘗試使用Tailwind類對其進行樣式設置

最后，問題來了：我可以應用一些類，如bg-awesome-color或text-xl並讓它們正確呈現，但很多其他類將無法工作。

例如，刪除這些類並嘗試改用bg-black 、 bg-orange-500或text-orange-500完全沒有效果。 我做錯什么了嗎？ 這會是 Vue.js 和 Tailwind.css 之間的兼容性問題嗎？

不知道有沒有關系，不過我也注意到在添加Tailwind.css之后，原來在vue-cli模板中居中的Vue logo現在在頁面中左對齊了。

非常感謝您的幫助！

Answer 1

如果你想保留原始內容，那么你應該把它放在“擴展”里面。

module.exports = { 
  theme: { 
    extend: {
      colors: { 
        "awesome-color": "#56b890", 
      }, 
    }
  }, 
  variants: {}, 
  plugins: [], 
};

閱讀更多： https://tailwindcss.com/docs/configuration/

Answer 2

發布問題后，我從 Tailwind.css 的維護者那里得到了答案。 我實際上在 tailwind.config.js 中放錯了colors tailwind.config.js ，導致它用我的覆蓋所有現有的 colors，從而實際上刪除了所有現有的。 這是在不刪除所有原始顏色的情況下添加/覆蓋顏色的正確方法：

module.exports = {
  theme: {
    extend: {
      colors: {
        "awesome-color": "#56b890",
      },
    },
  },
  variants: {},
  plugins: [],
};

Answer 3

同樣的事情發生在我身上，我花了幾個小時試圖理解為什么我的自定義 styles 不工作，你的錯誤可能在postcss.config.js中，確保在導入tailwind.config.js時你調用正確，我舉幾個例子：

// postcss.confing.js
const tailwindcss = require("tailwindcss");
const autoprefixer = require("autoprefixer");

module.exports = {
  plugins: [
    tailwindcss("./tailwind.config.js"), // name your custom tailwind
    ...
  ],
};

// postcss.confing.js
module.exports = {
  "plugins": [
    require('tailwindcss')('tailwind.config.js'), // name your custom tailwind
    require('autoprefixer')(),
  ]
}

在這兩種情況下，它都為我解決了問題，希望對您有所幫助。

Answer 4

你必須使用vue-tailwind 安裝 tailwindcss 。

運行npm install tailwindcss 。

想了解更多可以go這里https://tailwindcss.com/docs/guides/vite