我使用Create-React-App创建了一个React应用程序,并安装了tailwindcss。
该应用程序工作成功,顺风样式应用正确。
然而,当我试图安装Typescript - Tailwind时,这些类就不再应用了?
有没有办法安装Typescript而不破坏Tailwind?
如果没有的话--我不介意在这个应用程序中不使用Typescript--但我只是想练习一下Typescript。
index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(<App />);
App.js
import React, {useState, useEffect} from 'react'
import axios from 'axios'
const App = () => {
const [price, setPrice] = useState('')
const fetchPrice = async() => {
const data = await axios.get('https://blockchain.info/ticker')
console.log(data.data)
setPrice(data.data)
}
useEffect(() => {
fetchPrice()
}, [])
return (
<div>
<h1 className="text-3xl text-white">Current Price</h1>
</div>
);
};
export default App
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
}
tailwind.config.js
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
1条答案
按热度按时间ee7vknir1#
答案是在启动应用程序时首先将--template添加到npx create-react-app中。
我删除了整个应用程序,并再次开始添加--template到npx create-react-app,它工作了。
我在下面的线程上尝试了所有的解决方案,没有一个有效。
Tailwind CSS classes not updating after initial build of react app
My tailwind does not apply to my react typescript project
TailwindCSS is not working after installation
create-react-app w/ TypeScript & Tailwind CSS; Tailwind's utility classes are not being applied
tailwindcss not working in create-react-app
Tailwind class is not working after installed