我成功地使用了 Tailwind,所以我在导入它时没有遇到问题。例如,我正在使用网格。但是,我无法创建他们示例中的表。 table 没有任何颜色。表格中没有添加任何样式,我缺少什么?
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>
);
最佳答案
好吧,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>
来源:复制自同一页面的源代码。
关于css - 不使用 Tailwind CSS 的表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66584502/