reactjs typescript 在使用Create-React-App制作的应用程序中打破顺风

fbcarpbf  于 2023-01-08  发布在  React
关注(0)|答案(1)|浏览(133)

我使用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: {},
  },
}

相关问题