2022.01.23(Sun.) <React 에서 Tailwind CSS 써 보기>

아직도 좁은 VS code 창에 여러 파일들을 동시에 띄여놓고 작업 하십니까?

 

 

1. Tailwind CSS?

• css 프레임워크이다.
• html 혹은 js 파일에서 className을 주는 것으로 css를 처리할 수 있다! css 파일을 옮겨 다니며 만들지 않아도 된다!

2. 어떻게 사용하나요?

1. npm install 한다.
   • npm install -D tailwindcss@latest
   • npm install -D postcss@latest
   • npm install -D autoprefixer@latest
   • nm install -D postcss-loader
     • post css에 관련한 패키지도 함께 설치하자. post css는 이전 포스팅에 있기 때문에 자세한 설명은 생략.
2. 각 config 파일들을 설정한다.

   • //postcss.config.js (파일이 없다면 만들어 쓴다)
     
     module.exports = {
     	plugins: { tailwindcss: {}, autoprefixer: {}, }
     }

   • // tailwind.config.js
     
     module.exports = {
       purge: [],
       darkMode: false, // or 'media' or 'class'
       theme: {
         extend: {},
       },
       variants: {},
       plugins: [],
     }

     • 간단하게 npx tailwindcss init 해도 된다.

   • // webpack.config.js
     
       module: {
         rules: [
           {
             test: /.jsx?$/,
             include: [path.resolve(__dirname, "src")],
             exclude: [path.resolve(__dirname, "node_modules")],
             loader: "babel-loader",
           },
           {
             test: /.css?$/,
             exclude: [],
             use: ["style-loader", "css-loader", "postcss-loader"],
           },
         ],
       },

     • 순서가 중요하다. use 부분의 가장 마지막에 넣어주자.
3. css를 적용해서 작업한다.

   • // index.css나 App.css에서 전체적으로 적용시킨다.
     
     @import "tailwindcss/base";
     @import "tailwindcss/components";
     @import "tailwindcss/utilities";

   • import React from "react";
     
     function page() {
     	<div>
         	<div className="m-15 text-red-500">
             	Hello World!
             </div>
         </div>
     }

   • className을 위의 예시처럼 정해주면 그에 맞게 바뀐 스타일을 얻을 수 있다.
   • 여기서 m은 margin, 그리고 택스트의 색을 바꿔 주었다.
   • 다양한 적용방법과 템플릿들은 공식 홈페이지에서 찾을 수 있다.

Installation: Tailwind CLI - Tailwind CSS