반응형
일단 설치
npm i -D tailwindcss postcss autoprefixer그리고
테일윈드 시작
npx tailwindcss init -p그러면 2가지 파일이 만들어지는데
postcss랑 tailwind.config 이다
여기서 postcss는 건드릴 것이 딱히 없고 고수는 있겠지만
나같은 초짜는 없다
config.js를 열어보면
저기 content부분에 원래는 아무것도 없으나 강의를 보면서 따라적었다.
저 의미는 “./” 이 의미는 현재 폴더에서 라는 뜻이다
“./pages/” 이의미는 현재폴더에 pages라는 폴더의 의미이다.
“./pages/**/” 이 의미는 현재폴더의 pages폴더 안에 모든 폴더를 얘기한다.
“./pages/**/*” 이 의미는 위 의미의 폴더에 모든 파일을 얘기한다.
“./pages/**/*.{js,jsx,ts,tsx}” 이 의미는 위 모든 파일 중에 js,jsx,ts,tsx 형식을 가진 폴더만을 얘기하는 것이고
여기서 js, jsx, ts, tsx 이렇게 쉼표 다음에 띄어쓰기를 넣으면 안되더라… 이것때문에 고생했다..
여튼 content안에 저걸 넣어주면 tailwind가 알아서 컴파일 해준다.
반응형