tailwindscss 가져오기

자기 필기의 요소가 비교적 강하다
포스터스 같은 학급명을 이해해야 해서 무서웠지만 무거운 허리를 들어 손을 얹었다.
도입 자체가 생각보다 100배 간단했다.
학급 명칭을 기억하거나 능숙하게 사용하는 것은 매우 어렵다.
출력을 읽는 css의 순서는 같다고 생각합니다.
이 기사는 익스프레스+pug으로 작성됐다.
공식 사이트의 설치 방법은 다음과 같다↓
카탈로그

가져오기

보태다

가져오기
Express 프로젝트 제작 생략.npx express-generator 또는 무엇으로 만들어 주세요.
1. 설치

npm install -D tailwindcss
npx tailwindcss init

npx tailwindcss를 실행하면 tailwind.config.js가 생성됩니다.
2. 설정
생성된 config 파일의 content에 읽을 파일을 씁니다.
상세 정보여기..
tailwind.config.js

content: [
  './views/**/*.{pug,html}'
],

3. 읽기 파일 만들기
이번에 public/styles/tailwind/main.css에서 입력한 파일을 만들었습니다.
public/styles/tailwind/main.css

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

4. 내보내기
다음 명령에서 실제 사용하는 css를 출력합니다.

npx tailwindcss -i ./public/styles/tailwind/main.css -o ./public/styles/tailwind/tailwind.css

package.json의scripts에 넣으면 편리합니다.--watch 옵션으로 핫 로딩이 가능합니다.-i 옵션 경로가 이전 입력 파일, -o 옵션 경로로 출력됩니다.
출력자의 css 파일을 읽습니다.
※ 공용 폴더는 정적 파일 폴더로 지정됩니다.
index.js

app.use(express.static(path.join(__dirname, 'public')));

layout.pug

//- 生成されたcssを読み込む（htmlでも同様）
link(rel='stylesheet', href='/styles/tailwind/tailwind.css')

index.pug

p.text-orange-300 オレンジのテキストです
p.bg-lime-200 緑の背景です

보태다
tailwindcss의 구조적인 일의 보충입니다.
tailwindcss 자체가postcss 플러그인인 것 같습니다.
postcss는 입력한 css 파일을 바탕으로 css 파일을 출력하는 구조입니다.
css를 읽거나 중간 처리 또는 단독 처리를 통해 출력 css를 출력합니다.
입력하고 싶은 @tailwind 이 여기에서 처리되었습니다.
tailwindscss의 출력 파일에서 출력은 읽기 대상 (config의 콘텐츠) 에 사용되는 클래스 이름 (css를 복원하는 내용) 의 css만 기록합니다.
물론 출력 명령을 실행할 때마다pug나pug를 다시 쓸 때마다 출력 파일은 업데이트되고 사용하지 않는 클래스는 삭제됩니다.