我按照tailwind网站上的教程学习,但我不能将tailwind应用到我的项目中。我真的不明白....以下是我的文件:)
App.css
@tailwind components;
@tailwind utilities;
app.tsx
import { Pokemon } from "./Pokemon";
export default function App() {
return <Pokemon />;
}
index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
index.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"
},
tailwind配置文件:
module.exports = {
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
我希望有一些帮助,因为我遵循了教程...我试图把一些代码在pokedex文件中,我导入了app.css,但没有显示顺风样式
1条答案
按热度按时间lh80um4z1#
删除您在App.css中添加的行。您只需要在index.css文件中使用它们。
执行以下更新:
tailwind.config.js
在根postcss.config.js中创建此文件