[tailwind&emotion]

 

 오늘은 리액트 쿼리 강의 마저 듣고 유튜브 프로젝트 api 받아보기, 회의, 테일윈드 알아보는 것만 했다. 

tailwind에 대한 생각은 뭔가... 내가 커스텀하기 어려울 것 같고 세세하게 정할 수 없을 것 같아서 꺼려졌는데 엘리쌤이 추천하기도 하고 검색해보니까 그런 애는 아닌 것 같아서(?ㅎ) 쓰게 됨! 아직 쓴 건 아니지만. 

 

yarn add @emotion/react @emotion/styled @emotion/css @emotion/server
yarn add -D twin.macro tailwindcss postcss@latest autoprefixer@latest @emotion/babel-plugin babel-plugin-macros

yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init

마구잡이로 설치하다보니 두 개 다 해서... 그냥 둘 다 가져왔다. 

 

emotion, tailwind, twin.macro 설치 

 

// package.json

...
  "babelMacros": {
    "twin": {
      "preset": "emotion"
    }
  }

// root의 babel.plugin.js

module.exports = {
  tailwind: {
    plugins: ["@emotion/babel-plugin", "babel-plugin-macros"],
    config: "./src/tailwind.config.js",
    format: "auto",
  },
};

// root의 postcss.config.js

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

// root의 tailwind.config.js

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

 

 

 

쓰는 곳
// index.js

import React from "react";
import Header from "./header/Header";
import tw from "twin.macro";

const Container = tw.p`bg-blue-600 w-full`;

export default function Layout({ children }) {
  return (
    <Container>
      <Header />
      왜안돼 됨도미도미됨됨돔ㄷ미ㅗ돔ㅁ 됨됨됨됨됨
      <div className=" bg-gray-700">{children}</div>
    </Container>
  );
}

 

+ 확장 프로그램

https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

Tailwind CSS IntelliSense - Visual Studio Marketplace

난 XHR 오류 어쩌구가 뜨기 때문에 여기서 다운로드 받아서 VSIX로 설치했다. 

 

설정에서 file.associations 검색

 

설정에서 editor.quickSuggestions 검색

 

off였던 strings를 바꿔줌

 

근데 이렇게 해도 자동완성 잘 안된다... 왜? 

 

 

 

 

테일윈드는 프레임워크별로 가이드도 있다! 나중에 Next.js로 할 때 참고하면 될듯

 

---

프리티어랑 같이 쓰면 자동 정렬도 되나봄

yarn add -D prettier prettier-plugin-tailwindcss

플러그인을 깔아야한다! 

 

Note that plugin autoloading is not supported when using certain package managers, such as pnpm or Yarn PnP. In this case you may need to add the plugin to your Prettier config explicitly:

 

내가 쓰는게 Yarn PnP인가..?그렇다면 괜히 yarn으로 깔았는데요.

 

// prettier.config.js
module.exports = {
  plugins: [require('prettier-plugin-tailwindcss')],
}

이렇게까지 해주니 자동 정렬 된다~

 

 

 

 

https://fe-developers.kakaoent.com/2022/221013-tailwind-and-design-system/

FE개발그룹에서는 Tailwind CSS를 왜 도입했고, 어떻게 사용했을까?

 

https://tailwindcss.com/docs/installation

Installation - Tailwind CSS

 

https://itchallenger.tistory.com/569

Styled-component와 Tailwind 함께 사용하기 with Twin Macro