表未使用Tailwind CSS

Question

我成功地使用了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>
);

}

Answer 1

好吧，tailwinddoe在后台没有使用相同的代码。如果你想产生与文档中相同的结果，你应该使用这个代码

<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>

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

Answer 2

默认配置中未启用祖母绿配色方案
默认颜色为灰色、蓝色、红色、黄色、绿色、粉色、靛蓝和紫色
启用祖母绿需要更改tailwind.config.js文件：

const colors = require('tailwindcss/colors');
module.exports = {
......
theme: {
fontFamily: {
},
extend: {
fontFamily: {
},
colors: {
emerald: colors.emerald
}
},
},
.........
}