一些顺风类在chrome检查中不起作用

Question

我正在尝试通过 Chrome Inspect Tool 使用 tailwindcss 开发项目的前端。但我面临的问题是有些类并不真正适用于 chrome 检查。我知道可能存在编译问题，因为这些类可能之前没有使用过，因此开发工具无法识别这些类。但我相信这个问题一定有一个聪明的解决方案，因为它可能对前端开发有很大帮助。

注意：我也添加了我的代码，但这似乎是在 Chrome 检查工具中设计前端时面临的普遍问题。 这是我的 tailwind.config.js:

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;

Answer 1

可能正如你所说，因为这些类之前没有使用过。

您可以尝试在 tailwind.config 中将这些类列入安全列表，如果是这种情况，那么这些类将会出现

//tailwind.config.js

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

在安全列表中添加任何类可确保该类得到渲染

Answer 2

您必须配置 tailwind.config 并为其提供包含组件的文件夹路径 在此输入图片描述