플러그인을 사용하지 않고 Gridsome으로 Tailwindcss 시작하기

Tailwindcss은 강력한 마인드로 웹 애플리케이션을 개발하기 위한 새로운 CSS 프레임워크입니다. 다른 프레임워크(Bootstrap, Bulma 등)는 일부 UI를 만들기 위해 상용구를 사용하는 데 중점을 두는 반면 Tailwind는 맞춤형 디자인을 신속하게 구축하기 위한 유틸리티 우선 CSS 프레임워크에 더 중점을 둡니다.

맞춤 디자인을 만들기 위해 다른 CSS 프레임워크의 ui 상용구와 싸울 필요가 없다는 의미입니다. margin-top의 경우 mt-4, box-shadow의 경우 shadow-xl, 빨간색 배경의 경우 bg-red-500과 같은 재사용 가능한 클래스 디자인 웹 구성 요소를 사용하기만 하면 됩니다. 각 클래스의 일부 화면 크기에 대해 반응형 중단점을 정의하는 것조차 매우 강력합니다.

다른 쪽에서 Gridsome은 Vue.js를 기반으로 하는 정적 사이트 생성기입니다. JAMstack이 등장한 이래 정적 사이트 생성기는 특히 랜딩 페이지 또는 문서 사이트를 위한 웹 사이트를 개발하고 제공하는 방법에 대한 떠오르는 별입니다.

이번 포스팅에서는 Gridsome을 이용하여 Tailwindcss를 사용해 보도록 하겠습니다. 플러그인을 사용하는 대신 파일 크기의 다른 종속성을 줄이기 위해 수동으로 Tailwind를 설정합니다. 그러나 플러그인을 사용하려면 이 게시물을 건너뛰고 여기( gridsome-plugin-tailwindcss )로 이동하십시오.

1. Gridsome CLI 설치

원사 사용: yarn global add @gridsome/cli

NPM 사용: npm install --global @gridsome/cli

2. 새로운 Gridsome 프로젝트 생성

시스템에 gridsome-cli를 설치한 후 프로젝트를 생성하여 상용구를 생성하고 웹사이트 개발을 시작합니다.

gridsome create my-gridsome-site

cd my-gridsome-site

3. Tailwindcss 설치

npm i tailwindcss

4. Tailwind 구성 파일 추가

Tailwind의 구성 파일에 대해 자세히 알아보려면 docs here으로 이동하세요.

npx tailwind init

또는 새 파일 tailwind.config.js을 루트 폴더에 추가

// tailwind.config.js
module.exports = {
  theme: {},
  variants: {},
  plugins: []
}

5. Tailwind를 Gridsome으로 가져오기

assets/css에 새 폴더를 만들고 새 파일 global.css을 추가합니다.

/* /src/assets/css/global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

그런 다음 global.css 파일에서 main.js을 가져옵니다.

// main.js
import "./assets/css/global.css";

6. gridsome 구성 파일에 tailwindcss 추가

// gridsome.config.js

const tailwindcss = require("tailwindcss")

module.exports = {
  siteName: 'Gridsome',
  plugins: [],
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          tailwindcss
        ],
      },
    },
  }
}

완료, tailwindcss는 이미 gridsome 프로젝트에 설정되어 있습니다. 몇 가지 예제 코드를 추가해 보겠습니다.

색인 파일 src/pages/Index.vue에 아래 코드를 추가합니다.

<div class="bg-indigo-900 text-center py-4 lg:px-4 mt-10">
  <div class="p-2 bg-indigo-800 items-center text-indigo-100 leading-none lg:rounded-full flex lg:inline-flex" role="alert">
    <span class="flex rounded-full bg-indigo-500 uppercase px-2 py-1 text-xs font-bold mr-3">New</span>
    <span class="font-semibold mr-2 text-left flex-auto">Get the coolest t-shirts from our brand new store</span>
    <svg class="fill-current opacity-75 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z"/></svg>
  </div>
</div>

<div class="bg-blue-100 border-t border-b border-blue-500 text-blue-700 px-4 py-3 mt-10" role="alert">
  <p class="font-bold">Informational message</p>
  <p class="text-sm">Some additional text to explain said message.</p>
</div>

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-10">
  Button
</button>

<button class="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow ml-3">
  Button
</button>

gridsome develop 명령으로 개발 서버를 시작하십시오.



브라우저에서 http://localhost:8080으로 이동하여 결과를 확인하십시오.



프로덕션의 경우 빌드 gridsome build을 실행하고 dist 폴더의 파일을 웹 서버, Amazon S3 또는 Google Cloud Storage에 제공해야 합니다.



이것은 dev.to의 첫 번째 게시물입니다. 실수가 있으면 알려주세요. 고맙습니다.

Source Code