css - 表未使用 Tailwind CSS
问题描述
我成功地使用了 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>
);
}
解决方案
好吧,tailwind并没有在后台使用相同的代码。如果您想产生与他们的文档中相同的结果,您应该使用此代码
<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>
来源:从同一页面的源代码复制。
推荐阅读
- java - 使用内存数据库测试石英调度程序配置类
- ruby-on-rails - 重新加载常量(ruby on rails)
- python - 使用 TensorFlow 2 在训练期间记录权重规范
- python - 将两个 (n,1) 数组连接成一个 (n, 2) 数组
- javascript - 定义一个函数将其作为道具传递,但我得到一个编译错误
- sql - 查找客户已购买的所有商店
- javascript - .map 不适用于反应中的对象数组
- javascript - 在表单域上配置键盘功能的问题
- flutter - Flutter:如何在 webview 中阻止全屏视频?
- reactjs - react hook useffect缺少依赖