Vite + React + TypeScript + Tailwind

 

[ 설치 ]

$ yarn create vite vite_test --template react-ts
$ cd vite_test
$ yarn add -D tailwindcss postcss autoprefixer
$ npx tailwindcss init
$ touch postcss.config.cjs
$ echo 'module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, } }' > ./postcss.config.cjs
$ yarn dev

 

 

 

[ 수정 ]

tailwind.config.cjs

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

 

src/App.css

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

 

src/App.tsx

import './App.css';

function App() {
    function onClick() {
        alert('Hello World!');
    }

    return (
        <div className="flex h-screen w-screen justify-center items-center">
            <button
                className="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded mt-4"
                onClick={onClick}
            >
                Click!
            </button>
        </div>
    );
}

export default App;

 

 

[ 결과 ]

 

 

2023.02.06 - [IT 인터넷/React Native & JS] - React를 ChatGPT에게 배우다.

React를 ChatGPT에게 배우다.