처음에는 HTML에 Tailwind 유틸리티 클래스를 추가하려면 템플릿 전체를 교체해야 한다고 생각했습니다. 하지만 Discourse 템플릿을 통째로 교체하는 것은 좋지 않은 방법이라는 조언을 받았습니다. 다행히도 Tailwind는 임의의 클래스 이름에도 CSS를 적용할 수 있습니다.
…이는 좋은 소식입니다. 그래서 저는 discourse_theme CLI를 사용하여 새로운 테마를 설정했습니다. tailwind-input.css 파일을 생성하고 Tailwind가 이를 소비하여 common/common.scss 파일을 생성하도록 했습니다.
하지만 그 후 Sass가 오류를 보고했습니다. 내용은 다음과 같았습니다.
✘ Error in common scss: Error: Function rgb is missing argument $green.
on line 477 of common.scss
>> background-color: rgb(239 246 255 / var(--tw-bg-opacity));
사실상 Tailwind가 생성한 CSS를 Sass 파일에 입력해서는 안 된다고 합니다. 권장되는 해결책은 Rails 앱을 다음과 같이 구성하는 것입니다.
config.assets.css_compressor = nil
저는 Rails나 Discourse 백엔드가 어떻게 구성되는지 알지 못하며, 관리형 호스팅을 사용하고 있으므로 이것이 저에게 실행 가능한 해결책인지도 모르겠습니다.
별도의 NPM 타겟이 postcss를 사용하여 tailwind를 빌드합니다: "tailwind:dev": "postcss tailwind/global.scss -o assets/tailwind.css
CSS 출력물은 테마에 포함되도록 assets 폴더에 배치됩니다. about.json 파일에 해당 에셋의 위치가 포함되어 있음을 확인하세요.
Discourse SCSS는 이 생성된 CSS를 직접 참조하지 않습니다.
대신 javascripts/discourse/initializers/tailwind-init.js.es6에 있는 자바스크립트 초기화 프로그램이 해당 에셋을 discourse-assets-stylesheets 요소의 끝에 새로운 link 요소로 추가합니다.
중요: tailwind.config.js에서 Tailwind의 preflight가 비활성화되어 있습니다. 그렇지 않으면 이전의 모든 CSS가 초기화되어 버리기 때문입니다. 대신 Tailwind 클래스를 추가하고 Discourse 자체의 preflight에 의존하는 방식을 원합니다.
우리는 조직 전체에서 웹사이트부터 앱까지 Tailwind를 도입하기 시작했습니다. 초기 목표는 공통된 정의에서 브랜드 색상과 폰트를 가져와 Tailwind로 적용하는 것입니다. 이후 헤더, 내비게이션, 히어로 섹션과 같은 커스텀 컴포넌트에 이를 활용할 예정입니다. 이 작업은 제가 이전에 시작했으며, 이제 다시 진행을 재개한 상태입니다.
Discourse의 기본 테마를 Tailwind CSS로 변경하고 싶어서 의견을 구합니다. 저는 개발 경험이 많지 않아, Tailwind를 Discourse 인스턴스에 통합하고 우리 필요에 맞게 커스터마이징하는 데 어떤 과정이 필요한지 이해하려고 노력하고 있습니다. 저희는 필요에 따라 Tailwind CSS를 커스터마이징할 수 있는 개발자가 있지만, 그는 Discourse에 이를 통합하는 방법에 대해 익숙하지 않습니다. 또한, Discourse 기본 테마에 사용된 모든 HTML을 찾지 못했고, 이것이 커스터마이징의 시작점이 될 것이라고 가정하고 있습니다. 이 문제를 어떻게 해결해야 하는지 방향이나 조언을 주시면 매우 감사하겠습니다. 도움과 지원에 감사드립니다.
