Tailwindcss - 如何使用.class 選擇器？

Question

我正在從 Ant 設計（使用 LESS）切換到使用 Tailwindcss。 總體而言，Tailwindcss 很好用，但我注意到其中存在一些問題。

在 LESS 中，通過定位 css 類名並使用.class選擇器修改其 css 來覆蓋 styles 更容易。

例如，此代碼段用於覆蓋ql-container和ql-toolbar上的 styles。

.container {
  [class*="ql-container"] {
    min-height: 100px;
    max-height: 200px;
    overflow-y: auto;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
  }

  [class*='ql-toolbar'] {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
  }
}

但是，我怎樣才能在 Tailwindcss 中做同樣的事情？ 可行嗎？ 或者我應該堅持使用 LESS 甚至純 CSS 來實現這種行為？

Answer 1

1. 如果你想調整tailwind.css類的基礎實現， tailwind.config.css是你要做的地方。

tailwind.config.css中的示例代碼：

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

2.如果你想用添加的功能覆蓋現有的樣式

示例：如果您希望text-8xl在其初始 class 實現不受影響的情況下添加下划線。 基數變化base.css class

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

@layer components {
  [class~="text-8xl"] {
    @apply text-8xl underline; 👈 text-8xl now has underline aswell
  }
}