表未使用 Tailwind CSS答案

【问题标题】：Table not using Tailwind CSS表未使用 Tailwind CSS
【发布时间】：2021-06-09 13:29:28
【问题描述】：

我已成功使用 Tailwind，因此导入它没有问题。例如，我正在使用网格。但是，我无法创建他们示例中的表。桌子没有任何颜色。表格中没有添加样式，我缺少什么？

tailwind.config.js：

module.exports = {
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
darkMode: false, // or 'media' or 'class'
theme: {
    extend: {},

},
variants: {
    extend: {
        tableLayout: ['hover', 'focus'],
    },
    container: {
        center: true,
    },
},
plugins: [],}

未按预期呈现的表格：

    selectedView(){
    return (
        <table className="table-auto">
            <thead>
            <tr>
                <th>Title</th>
                <th>Author</th>
                <th>Views</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>Intro to CSS</td>
                <td>Adam</td>
                <td>858</td>
            </tr>
            <tr className="bg-emerald-200">
                <td>A Long and Winding Tour of the History of UI Frameworks and Tools and the Impact on Design
                </td>
                <td>Adam</td>
                <td>112</td>
            </tr>
            <tr>
                <td>Intro to JavaScript</td>
                <td>Chris</td>
                <td>1,280</td>
            </tr>
            </tbody>
        </table>
);

}

【问题讨论】：

标签： css reactjs tailwind-css

【解决方案1】：

嗯，tailwind 并没有使用相同的代码。如果你想产生与thier documentation 相同的结果，你应该使用这个代码

<div class="rounded-t-xl overflow-hidden bg-gradient-to-r from-emerald-50 to-teal-100 p-10">
  <table class="table-auto">
    <thead>
      <tr>
        <th class="px-4 py-2 text-emerald-600">Title</th>
        <th class="px-4 py-2 text-emerald-600">Author</th>
        <th class="px-4 py-2 text-emerald-600">Views</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="border border-emerald-500 px-4 py-2 text-emerald-600 font-medium">Intro to CSS</td>
        <td class="border border-emerald-500 px-4 py-2 text-emerald-600 font-medium">Adam</td>
        <td class="border border-emerald-500 px-4 py-2 text-emerald-600 font-medium">858</td>
      </tr>
      <tr class="bg-emerald-200">
        <td class="border border-emerald-500 px-4 py-2 text-emerald-600 font-medium">A Long and Winding Tour of the History of UI Frameworks and Tools and the Impact on Design</td>
        <td class="border border-emerald-500 px-4 py-2 text-emerald-600 font-medium">Adam</td>
        <td class="border border-emerald-500 px-4 py-2 text-emerald-600 font-medium">112</td>
      </tr>
      <tr>
        <td class="border border-emerald-500 px-4 py-2 text-emerald-600 font-medium">Intro to JavaScript</td>
        <td class="border border-emerald-500 px-4 py-2 text-emerald-600 font-medium">Chris</td>
        <td class="border border-emerald-500 px-4 py-2 text-emerald-600 font-medium">1,280</td>
      </tr>
    </tbody>
  </table>
</div>

来源：复制自同一页面的源代码。

【讨论】：

谢谢，这有点骗人。它看起来好多了，但我没有得到任何颜色，只有黑色和白色？

【解决方案2】：

翡翠色配色方案在默认配置中未启用。
默认颜色为灰色、蓝色、红色、黄色、绿色、粉色、靛蓝色、紫色。
启用 Emerald 需要更改您的 tailwind.config.js 文件：

const colors = require('tailwindcss/colors');

module.exports = {

  ......

  theme: {
    fontFamily: {
    },
    extend: {
      fontFamily: {
      },
      colors: {
        emerald: colors.emerald
      }
    },
  },
   .........
}

【讨论】：