[英]Table not using Tailwind CSS
I am successfully using Tailwind so I'm not having a problem with importing it.我成功地使用了 Tailwind,所以我在导入它时没有问题。 I'm using a grid for example.
例如,我正在使用网格。 However, I am unable to create a table that is in their examples.
但是,我无法创建他们示例中的表。 The table is not getting any of the colors.
该表没有得到任何 colors。 No styling is added to the table, what am I missing?
表格中没有添加样式,我错过了什么?
tailwind.config.js: 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: [],}
Table that isn't rendering as expected:未按预期呈现的表:
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>
);
} }
Well, tailwind doe not uses the same code under the hood.好吧, tailwind并没有在后台使用相同的代码。 If you want to produce the same result as in thier documentation , you should use this code
如果您想产生与他们的文档中相同的结果,您应该使用此代码
<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>
Source: copied from the same page's source code.来源:从同一页面的源代码复制。
The emerald color scheme is not enabled in the default configuration.默认配置中未启用翡翠色配色方案。
The default colors are gray, blue, red, yellow, green, pink, indigo, purple.默认 colors 为灰色、蓝色、红色、黄色、绿色、粉色、靛蓝色、紫色。
Enabling emerald requires a change to your tailwind.config.js file:启用 Emerald 需要更改您的 tailwind.config.js 文件:
const colors = require('tailwindcss/colors');
module.exports = {
......
theme: {
fontFamily: {
},
extend: {
fontFamily: {
},
colors: {
emerald: colors.emerald
}
},
},
.........
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.