我尝试通过Chrome Inspect工具使用tailwindcss开发我项目的前端。但我面临的问题是有些类并不适用于Chrome Inspect。我理解可能存在编译问题,因为这些类之前可能没有使用过。所以开发工具不能识别这些类,但是我相信一定有一个聪明的解决方案来解决这个问题,因为它可能会对前端开发有很大的帮助。
注意:我也添加了我的代码,但这似乎是在Chrome Inspect工具中设计前端时遇到的一个常见问题。
const plugin = require('tailwindcss/plugin');
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
content: ["./src/***/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
下面是组件代码:
import logo from "../../assets/icons/logo.svg";
function Footer() {
return (
<div className="flex flex-col">
<div className="flex bg-[#00D4B5]">
<div className="">
<img src={logo} alt="Logo" />
<p>The Driveli Promise</p>
</div>
<p>We want to make learning to drive stress-free from beginning to end. That’s why we take care of scheduling, payments, and everything else in between. You just need to keep your eyes on the road!</p>
</div>
<div className="flex">
<div className="flex flex-col">
<p>COMPANY</p>
<ul>
<li>About Us</li>
<li>Contact</li>
<li>Terms of Service</li>
<li>Privacy Policy</li>
<li>FAQ </li>
<li>Blog</li>
</ul>
</div>
<div className="flex flex-col">
<p>LEARNERS</p>
<ul>
<li>How it works</li>
<li>Referrals</li>
<li>Learner’s Journey</li>
<li>Learning to drive</li>
</ul>
</div>
<div className="flex flex-col">
<p>INSTRUCTORS</p>
<ul>
<li>Driving Instructor </li>
<li> How it works</li>
<li>Referrals</li>
</ul>
</div>
<div className="flex flex-col">
<p>INSTRUCTORS</p>
<ul>
<li>Driving Instructor</li>
<li>How it works</li>
<li>Referrals</li>
</ul>
</div>
<div className="flex flex-col">
<img src=""></img>
<img src=""></img>
<img src=""></img>
<img src=""></img>
</div>
</div>
<div className="flex justify-between">
<p>© 2022 Driveli.co.uk All rights reserved.</p>
<div className="flex">
<img src=""></img>
<img src=""></img>
<img src=""></img>
<img src=""></img>
<img src=""></img>
</div>
</div>
</div>
);
}
export default Footer;
1条答案
按热度按时间z9smfwbn1#
可能正如您所说,因为这些类以前没有使用过。
您可以尝试在tailwind.config中列出这些类的安全列表,如果是这种情况,这些类就会出现
在安全列表中添加任何类都可以确保呈现此类