我需要保存 tailwind.config.js 文件才能应用更改

Question

更新
我认为当我更新并将脚本保存在

package.json

文件中时，vs code 出了问题，我再次保存了

package.json

并重新启动了站点，现在问题消失了。

我面临着顺风CSS的这个问题，基本上当我将类名应用于一个项目时，我需要转到

tailwind.config.js

文件并保存它以供我的更改应用，例如，如果我放置一个我需要的

text-6xl

转到我的

tailwind.config.js

文件并保存它以便应用更改，现在，如果我将该项目的类名更改为

text-5xl

，样式将重置，我需要再次保存

tailwind.config.js

文件以进行更改申请。这真是令人沮丧。

这是我的代码：

index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

app.js

import React from "react";
import Navbar from "./components/navbar";

function App() {
  return (
    <div className="App">
      <Navbar />
    </div>
  );
}

export default App;

tailwind.config.js

module.exports = {
purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      fontFamily: {
        poppins: "'Poppins', sans-serif",
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

navbar.jsx

import React from "react";

const Navbar = () => {
  return (
    <React.Fragment>
      {/* The Item I Was Talking About... */}
      <h1 className="text-6xl text-blue-500">Navbar</h1>
    </React.Fragment>
  );
};

export default Navbar;

index.css

/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Answer 1

在项目中使用 tailwind cdn 即可查看更改而无需保存