최초 출시 시점divrhino.com
Tailwind는 실용적인 CSS 라이브러리로 지난 몇 년 동안 광범위하게 응용되었다.실용 프로그램 라이브러리는 매우 좋다. 왜냐하면 자신의 맞춤형 디자인을 구축할 때 프레임워크와 충돌하지 않기 때문이다.Tailwind를 사용하면 HTML과 CSS 사이를 계속 뛰어다니지 않기 때문에 사이트를 더욱 빨리 구축할 수 있습니다.이 자습서에서는 Hugo 프로젝트에 TailwindCSS를 추가하는 방법을 학습합니다.

선결 조건

본 강좌를 계속 공부하려면 Hugo와 NodeJS를 설치해야 합니다
설치 가이드:
우과: https://gohugo.io/getting-started/installing/

NodeJS:https://nodejs.org/en/download/

우과 프로젝트와 테마 만들기

새 프로젝트를 만드는 것부터 시작합시다.모든 항목을 저장하는 디렉터리로 이동한 다음 명령을 실행하여 새로운hugo 사이트를 만듭니다.우리는 우리의 사이트를'hugotails'라고 명명할 것이다.

cd Sites
hugo new site hugotails

그리고 디렉터리를 우리의 새로운'hugotails'사이트로 변경하고 새로운 테마를 만듭니다.우리는 이 주제를'windy theme'라고 부른다.

cd hugotails

hugo new theme windytheme

NPM 초기화 및 종속성 설치

현재 우리는 이미 hugo 사이트를 준비해서 우리가tailwind를 설치할 수 있도록 한다.이 자습서의 이 부분을 따르려면 Nodejs를 설치해야 합니다.따라서 아직 설치하지 않았다면, 계속하기 전에 설치하기를 원할 수도 있습니다.
"hugotails"프로젝트 루트 디렉터리에 있는 것을 확인하십시오. NPM을 초기화할 것입니다.우리는 npm init 로고가 있는 --yes 명령을 실행할 수 있으며, 이렇게 하면 모든 설정 문제를 검사할 필요가 없다.
이 명령을 성공적으로 실행하면 프로젝트 루트 디렉터리에 새 package.json 을 만들 것입니다.

npm init --yes

현재 우리 프로젝트는 NPM과 초기화되었기 때문에 우리는 필요한 소프트웨어 패키지를 계속 설치할 수 있다.실행:

npm install --save-dev autoprefixer postcss postcss-cli postcss-import tailwindcss

이 패키지를 개발 의존항으로 저장하기를 원하기 때문에 -save-dev 로고를 전달하고 있습니다.
만약 당신이 알아차렸다면, 우리는tailwind 패키지를 설치했을 뿐만 아니라, 일부 다른 패키지도 첨부했습니다.각 항목에 대한 간략한 설명은 다음과 같습니다.

Postcss - JavaScript를 사용하여 CSS를 변환하는 도구입니다.

postcss-cli - 터미널

에서 POSTSS 명령을 실행할 수 있는 명령행 도구

postcss-import - @import 규칙을 해석하는 경로

autoprefixer - CSS에 공급업체 접두어 추가

tailwindcss - 많은 작업을 하지 않고 고유한 사용자 정의 레이아웃을 구축하는 데 도움을 주는 유틸리티 라이브러리

구성 파일 설정

다음은 웹 사이트에 새 windytheme 테마를 사용하는 방법hugotails/config.toml 파일에 다음 줄을 추가하는 방법입니다.

...
theme = "windytheme"

PostCSS 플러그인으로tailwind를 계속 추가할 수 있습니다.우리는 새로운 주제를 처리하고 있기 때문에, 우리는 아직 css 목록이 없다.만들어봅시다.-p 로고가 있는 mkdir를 실행하면 플러그인 디렉터리를 만들 것입니다.

mkdir -p themes/windytheme/assets/css/

다음은postss와tailwind를 위한 프로필을 만들어야 합니다.기본 styles.scss 파일이 하나 더 필요합니다.

touch themes/windytheme/assets/css/postcss.config.js
touch themes/windytheme/assets/css/tailwind.config.js
touch themes/windytheme/assets/css/styles.scss

우리는postss 설정을 먼저 처리합시다.파일 열기postcss.config.js

const themeDir = __dirname + '/../../';

module.exports = {    
    plugins: [   
        require('postcss-import')({
            path: [themeDir]
            }), 
        require('tailwindcss')(themeDir + 'assets/css/tailwind.config.js'),
        require('autoprefixer')({
            path: [themeDir]
        }),
    ]
}

와, 너무 많다.아직 완료되지 않았습니다. tailwind.config.js 로 이동하여 TailwindCSS에 기본 프로필을 추가합니다.

module.exports = {
  theme: {
    extend: {}
  },
  variants: {},
  plugins: []
}

스타일을 업데이트합니다.scss

현재 우리는 스타일시트에 필요한 미풍 도입을 포함해야 한다.스타일시트styles.scss를 열고 다음 가져오기를 추가합니다.

@import "node_modules/tailwindcss/base";
@import "node_modules/tailwindcss/components";
@import "node_modules/tailwindcss/utilities";

헤드 태그의 CSS 가져오기

새 테마를 만들 때, 우과는 시작 템플릿 파일을 만드는 데 도움을 줍니다.그 중 하나는 head.html 부분 파일이다.

{{ $styles := resources.Get "css/styles.scss" | toCSS | postCSS (dict "config" "./assets/css/postcss.config.js") }}
{{ if .Site.IsServer }}
  <link rel="stylesheet" href="{{ $styles.RelPermalink }}">
{{ else }}
  {{ $styles := $styles | minify | fingerprint | resources.PostProcess }}
  <link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}">
{{ end }}

그럼 위의 코드는 어떻게 된 거예요?한 줄 한 줄 살펴보자.

$styles := resources.Get "css/styles.scss" - 스타일시트를 스타일즈

라는 변수에 자원으로 저장합니다.

| toCSS - Hugo pipes를 사용하여 먼저 SCSS 파일을 CSS로 변환하여 브라우저가 이해할 수 있도록 합니다

| postCSS (dict "config" "./assets/css/postcss.config.js") - postss 프로필이 있는 위치를 가리킨다

우리는 IsServer 변수를 사용하여 로컬 개발 환경에 있는지 확인할 것입니다. 만약 그렇다면 스타일시트 상대 URL

에 연결할 것입니다.

그러나 만약에 우리가 생산 환경에서 Hugo Pipes를 사용하여 css 파일을 축소할 것이다

자산이 변경되지 않았음을 알 수 있도록 지문을 통해 전달하고자 합니다.이것은 또 하나의 좋은 캐시 파괴 부작용이 있기 때문에 우리도 우리가 제공한 것이 최신 버전

이라는 것을 안다

일부 TailwindCSS 클래스 테스트

우리는 이미 필요한 모든 설정을 설정했다.이제 우리도 index 페이지를 설정하자.이 파일은 themes/windytheme/layouts/index.html에 있습니다.

{{ define "main" }}
  {{ .Content }}
{{ end }}

이제 우리는 우리의 스타일을 도입하고 유용한 방식으로 그것을 전환시켜 모든 것이 효과가 있는지 확인할 수 있다.themes/windytheme/layouts/partials/header.html 파일에 기본 헤더를 만듭니다.

<header>
  <h1>Welcome to HugoTails!</h1>
</header>

themes/windytheme/layouts/partials/header.html에 tailwind 유틸리티 클래스를 추가합니다.

<header class="w-full bg-red-300">
  <h1 class="text-center">Welcome to HugoTails!</h1>
</header>

우과 서버도 시작해야 합니다.

hugo server

브라우저를 열고 http://localhost:1313 방문하면 변경 사항을 볼 수 있을 것입니다.

결론

이 강좌에서, 당신은 hugo Pipes를 사용하여tailwindcss를 hugo 사이트에 추가하는 방법을 배웠습니다.만약 당신이 이 글을 좋아하고 더 많은 것을 원한다면 다음과 같은 내용을 고려할 수 있다.
축하해, 잘했어.계속 공부해, 계속 코딩해!

디프리노 / 우과

TailwindCSS를 Hugo 사이트에 추가합니다.동영상 튜토리얼은 Div Rhino 유튜브 채널에서 이용할 수 있다.

우과

텍스트 자습서: https://divrhino.com/articles/add-tailwindcss-to-hugo/

비디오 자습서:

View on GitHub