테마에 기본 세팅

tailwindcss를 테마에 적용하기 위해 기본적인 세팅을 진행 해야 합니다.

CDN을 이용해서 사용할 수도 있으나 tailwindcss 사이트에도 나와 있듯이 개발 환경에서 빠르게 확인하기 위한 용도로 사용하는 것을 권고하고 실제 배포시에는 좋은 방법이 아님을 명시하고 있습니다.

차일드테마 폴더 안에서 터미널을 실행시키고

echo {} ./package.json

파일이 추가 되었으면 tailwindcss를 npm으로 설치

npm install tailwindcss --save-dev

tailwindcss 설정 파일 초기화

npx tailwindcss init

모든 작업을 완료하면 차일드테마 폴더 안에

• package.json
• tailwind.config.js

파일이 추가된것을 확인 할 수 있습니다.

tailwind.config.js 파일을 VSC로 오픈하고 일부 내용을 수정합니다.

module.exports = {
  content: ["./**/*.php"],
  theme: {
    extend: {},
  },
  plugins: [],
}

차일드테마 폴더 안에서 tailwind.css 파일을 생성하고 다음 내용을 추가 합니다.

/*
Theme Name:   ez Child
Template:     ez
*/
@import '../ez/style.css';

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

터미널에 아래 내용 입력.

npx tailwindcss -i ./tailwind.css -o ./style.css --catch

npx tailwindcss -i ./tailwind.css -o ./style.css --watch

모든 작업이 완료되면

차일드테마 폴더에서 모든 php 파일 내용에 tailwindcss 클래스를 입력 후 저장시 사용된 클래스를 자동으로 style.css 파일에 추가되는 것은 확인하실 수 있습니다.