不符合 Tailwind 自定义颜色

如何解决不符合 Tailwind 自定义颜色

在 npm start (craco start) 上，一切工作正常并且正在编译颜色。

虽然运行 npm run build (craco build) 时，每种配置只编译一种颜色，dallas 来自 theme.textColor，vista-white 来自 {{1 }}。

我试过了：

• 重新排序 theme.gradientColorStops 属性。
• 删除 theme.textColor 和 node_modules。
• 删除 npm i 并重建。

build

// craco.config.js
module.exports = {
  style: {
    postcss: {
      plugins: [require('tailwindcss'),require('autoprefixer')],},};

解决方法

感谢 @George 指出问题：

Purge 不会识别您对此类的使用。见https://tailwindcss.com/docs/optimizing-for-production#writing-purgeable-html。具体来说，“不要使用字符串连接来创建类名”。 Purge 在任何方面都不是“智能”的，它的工作原理是将您的实用程序与整个模板中的类（或任何字符串，实际上……）进行匹配。

一种可能的解决方案是将要清除的类添加到 purge.safelist：

// tailwind.config.js
module.exports = {
  // Added safelist
  purge: {
    content: ['./src/**/*.{js,jsx,ts,tsx}','./public/index.html'],options: {
      safelist: ['hover:text-blue-charcoal','hover:text-denim','hover:text-spring-green','hover:text-flamingo'],},darkMode: false,// or 'media' or 'class'
  theme: {
    extend: {},textColor: (theme) => ({
      ...theme('colors'),dallas: '#664A2D','blue-charcoal': '#24292E',denim: '#0D66C2','spring-green': '#05E776',flamingo: '#E65A4D',}),gradientColorStops: (theme) => ({
      ...theme('colors'),'vista-white': '#E1DFDC',variants: {
    extend: {},plugins: [],};

,

您应该将 textColor 更改为颜色。

module.exports = {
  theme: {
    colors: {
      // Configure your color palette here
    }
  }
}

,

要在 Tailwind 中自定义文本颜色，您需要像这样配置 tailwind.config.js

diff --git a/src/app/Library/CrudPanel/Traits/Query.php b/src/app/Library/CrudPanel/Traits/Query.php
index 8a7453a1..ad802b97 100644
--- a/src/app/Library/CrudPanel/Traits/Query.php
+++ b/src/app/Library/CrudPanel/Traits/Query.php
@@ -145,7 +145,7 @@ trait Query
 
     public function orderByWithPrefix($column_name,$column_direction = 'ASC')
     {
-        if ($this->driverIsSql()) {
+        if (null !== $this->query->getQuery()->joins) {
             return $this->query->orderByRaw($this->model->getTableWithPrefix().'.'.$column_name.' '.$column_direction);
         }

您可以参考 Tailwind docs 了解更多信息。