我的顺风不适用于我的反应打字稿项目答案

【问题标题】：My tailwind does not apply to my react typescript project我的顺风不适用于我的反应打字稿项目
【发布时间】：2022-11-15 12:30:19
【问题描述】：

我按照顺风网站上的教程进行操作，但无法将顺风应用到我的项目中。我真的不明白...... 这是我的文件:)

应用程序.css

@tailwind components;
@tailwind utilities;

应用程序.tsx

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

索引.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'),
        ],
      },
    },
  }

包.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 文件中但没有显示顺风风格

【问题讨论】：

标签： javascript reactjs typescript tailwind-css craco

【解决方案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: {},
  },
}

【讨论】：