相关疑难解决方法(0)

Tailwind 的配置文档对该extend属性进行了多种使用，但没有阐明对theme属性进行自定义与对theme.extend属性进行自定义的区别。

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
    }
  },
}

这里有什么区别呢？我已经测试过，可以切换颜色和间距属性，并且它们仍然有效。

我正在尝试将 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: [], 
};

• 将一个简单<p>元素添加到HelloWorld.vue生成的组件中vue-cli
• 尝试使用Tailwind类来设计它的样式

最后，问题是：我可以应用一些类，例如bg-awesome-colorortext-xl并让它们正确渲染，但许多其他类将无法工作。

例如，删除这些类并尝试改为bg-black, bg-orange-500, …