我成功地使用了顺风,所以我没有导入它的问题。举个例子,我用的是网格。但是,我无法创建一个在他们的例子中的表。这张桌子没有颜色。没有样式添加到表中,我错过了什么?
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>
);
}
好吧,顺风没有使用相同的代码在引擎盖下。如果希望生成与文档中相同的结果,则应使用以下代码
<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>
来源:复制自同一页的源代码。