tailwind 설정 산책

kimyongyeon·2020년 12월 21일
0

tailwind css 프레임워크로 유명하다.
나도 한번 써봤다.
역시나 싶지 않다. 시작도 못하겠다. 싶어 일단 설정을 어떻게 했는지 공유한다.
나머지는 코드를 보면 이해가 쉬울 것이다.

npm install tailwindcss postcss-cli autoprefixer
"autoprefixer": "^9.8.6"

# tailwind.config.js
npx tailwind init
npx tailwind init tailwind-full.config.js --full (완전한 구성파일 생성)

postcss.config.js
module.exports = {
    plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    ]
}

# tailwind.css 지시문 추가
@tailwind base;
@tailwind components;
@tailwind utilities;

"build": "postcss css/tailwind.css -o public/build/tailwind.css"

npm run build

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="/build/tailwind.css">
</head>
<body>
  <h1 class="text-4xl font-bold text-center text-blue-500">Hello world!</h1>
</body>
</html>
profile
단 한줄의 코딩으로 세상을 바꾸는 힘을 가진자

관심 있을 만한 포스트

0개의 댓글