SCSS로 TailwindCSS 프로젝트를 시작하는 방법

TailwindCSS은 유틸리티 우선 프레임워크입니다. 수백 개의 크고 투박한 미리 빌드된 구성 요소가 포함된 Bootstrap 에 비해 작습니다. 대신 Tailwind에는 페이지 스타일을 지정하기 위해 함께 연결하기 쉬운 수백 개의 클래스가 포함되어 있습니다. 디자인이 끝나면 이러한 클래스를 제거하고 축소하여 작은 css 파일을 생성할 수도 있습니다.

SASS은 CSS 작성을 보다 효율적이고 훨씬 쉽게 해주는 CSS 전처리기입니다.
이 게시물에서는 프로젝트에서 TailwindCSS로 SASS를 설정하는 방법을 보여드리겠습니다. 이를 위해 Vite을 빌드 도구로 사용합니다.

시작하기

터미널을 열고 다음 명령을 실행하십시오.

npm init vite my-project

드롭다운에서 프레임워크를 선택합니다vanilla.


vanilla에 대한 변형도 선택합니다. typescript를 사용하려면 vanilla-ts를 선택하십시오.



이제 cd 프로젝트에

cd my-project

npm을 통해 tailwindcss 및 해당 피어 종속성을 설치한 다음 init 명령을 실행하여 tailwind.config.js 및 postcss.config.js 를 모두 생성합니다.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

tailwind.config.js 파일의 모든 템플릿 파일에 대한 경로를 추가합니다.

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

이제 개발 종속성으로 설치sass

npm install -D sass

폴더scss를 만들고 style.css 파일을 scss 폴더로 이동하고 이름을 style.scss로 바꿉니다.

이제 @tailwind 파일에 Tailwind의 각 레이어에 대한 style.scss 지시문을 추가합니다.

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

./scss/style.css 파일에서 ./main.js 파일을 가져옵니다.

import './scss/style.scss'

다음 명령을 사용하여 빌드 프로세스를 실행하십시오.

npm run dev

로컬 개발 서버는 http://localhost:3000에서 실행됩니다.

Tailwind의 유틸리티 클래스를 사용하여 index.html 파일에서 콘텐츠의 스타일을 지정하십시오.

<h1 class="text-3xl font-bold underline">
  Hello world!
</h1>

이GitHub repository를 시작 템플릿으로 사용할 수도 있습니다.