我的順風不適用於我的 React typescript 項目

Question

我按照 tailwind 網站上的教程進行操作，但無法將 tailwind 應用到我的項目中。 我真的不明白....這是我的文件:)

申請.css

@tailwind components;
@tailwind utilities; 

應用程序.tsx

import { Pokemon } from "./Pokemon";
export default function App() {
  return <Pokemon />;
}

index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

索引.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>

);
 

我的 craco.config.js

module.exports = {
    style: {
      postcss: {
        plugins: [
          require('tailwindcss'),
          require('autoprefixer'),
        ],
      },
    },
  }

package.json

"scripts": {
    "start": "craco start",
     "build": "craco build",
     "test": "craco test",
    "eject": "react-scripts eject"
  },

順風配置文件：

module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

我希望能得到一些幫助，因為我遵循了教程......我試圖將一些代碼放在導入 app.css 的 pokedex 文件中，但沒有顯示順風樣式

Answer 1

刪除您在 App.css 中添加的行。 您只需要在 index.css 文件中使用它們。

做這些更新：

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./src/**/*.{js,jsx,ts,tsx}"],
    theme: {
        extend: {},
    },
    plugins: [],
};

在根 postcss.config.js 中創建此文件

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}