react + tailwind

1. 설치하기

 

npm install -D tailwindcss
npx tailwindcss init

 

 

2. tailwind.config.js

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

 

 

728x90

 

3. index.css

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

/*최상단에 추가*/

 

 

4. npm run start

5.예시 

export default function App() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}

👀테일윈드 더 알아보기

Install Tailwind CSS with Create React App - Tailwind CSS

반응형

 

6.tailwind extention 추천

 

1) Tailwind CSS IntelliSense

html 에서 클래스 작성 시, 입력한 문자로 시작하는 클래스명들을 보여준다.

Tailwind CSS IntelliSense

 

👀리액트에서 자동완성 적용하기

1> Ctrl + Shipt + P 에서 Open User Setting(Json) = 설정파일에서  Open User Setting(Json) 클릭

2>  아래와 같이 수정한다.

{
	...

    "files.associations": {
        ...
        "*.css": "tailwindcss"
    },
    "editor.quickSuggestions": {
        "strings": true
    }
    ...
}

 

2) Tailwind CSS Explorer

tailwind 클래스명들을 속성별로 검색 확인할 수 있다.

Tailwind CSS Explorer

 

3) Headwind

html 안에 클래스에 작성한 클래스를 속성별로 재배열 시켜준다.

 

Headwind