一些tailwind类在chrome inspect中不起作用

eqfvzcg8  于 2023-03-10  发布在  Go
关注(0)|答案(1)|浏览(176)

我尝试通过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;
z9smfwbn

z9smfwbn1#

可能正如您所说,因为这些类以前没有使用过。
您可以尝试在tailwind.config中列出这些类的安全列表,如果是这种情况,这些类就会出现

//tailwind.config.js

const plugin = require('tailwindcss/plugin');
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  safelist: [
    'bg-[#00D4B5]',
  ],
....

在安全列表中添加任何类都可以确保呈现此类

相关问题