•
VSC 터미널에 tailwind css 설치
npm install -D tailwindcss
npx tailwindcss init
Shell
복사
•
taliwind.config.js의 content를 다음과 같이 설정
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {},
},
plugins: [],
}
JavaScript
복사
•
src 폴더의 index.css 를 다음과 같이 설정
@tailwind base;
@tailwind components;
@tailwind utilities;
CSS
복사
•
app.js를 수정한다.
function App() {
return (
// tailwind 문법 활용
<div className="text-4xl font-extrabold m-2 p-3 bg-green-500">
Hello World
</div>
);
}
export default App;
JavaScript
복사