[Project] - React + TypeScript + Tailwind css

https://tailwindcss.com/docs/installation/using-postcss

https://react.dev/learn/typescript

https://react-typescript-cheatsheet.netlify.app/docs/basic/setup

 

 

- 설치하기

npx create-react-app mini --template typescript

npm install @types/react @types/react-dom

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

 

 

- tailwind.config.js

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

 

 

- postcss.config.js

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

 

 

- index.css

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

 

 

- app.tsx

function App() {
  return (
    <div className="App">
      <div className="w-60 h-60 bg-yellow-400">test!!!</div>
    </div>
  );
}

export default App;