Svelte로 Tailwind를 구성하는 방법은 무엇입니까?

부트스트랩이나 Material-UI와 같은 CSS 프레임워크는 웹 애플리케이션 개발을 위한 훌륭한 도구입니다. 그러나 현장을 방문하면 동일한 증후군을 앓고 있습니다.



이 동일한 증후군을 해결하기 위해 유틸리티 우선 프레임워크인 Tailwind CSS가 있습니다.

낮은 수준의 도우미 클래스를 제공합니다.

맞춤형 디자인을 빠르게 구현할 수 있습니다

미리 만들어진 구성 요소를 사용하도록 강요하지 않습니다.

유틸리티 클래스는 설계에 따라 사이트의 윤곽을 그릴 수 있는 자유를 제공합니다.

전제 조건

계속 진행하기 전에 시스템에 다음이 있어야 합니다.

설치된 노드의 최신 버전

시스템에 yarn 또는 npm 설치

시스템에 npx를 설치하십시오.

Svelte 프로젝트 만들기

Svelte 프로젝트를 생성하려면 degit를 사용하여 yarn를 설치해야 합니다.

yarn add global degit

이제 Svelte에서 프로젝트를 생성할 준비가 되었습니다.

npx degit sveltejs/template sveltetailwind  

# Change the directory
cd sveltetailwind

Tailwind, PostCss 및 AutoPrefixer 설치

tailwind를 설치하기 위해 yarn 를 사용할 것입니다. 자유롭게 사용해도 npm

 yarn add tailwind postcss autoprefixer

구성

postcss.config.js 디렉토리 아래에 새 파일sveltetailwind을 만듭니다. 그리고 다음 내용을 추가합니다.

module.exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer')
    ]
}

다른 파일 만들기tailwind.config.js

module.exports = {
    plugins: [
    ],
    purge: {
        content: [
            "./src/*.svelte", "./src/**/*.{html,js,svelte}"
        ],
    },
};

다음 단계는 public 아래에 css 폴더를 만들고 다음을 추가하는 것입니다.

tailwind.css css 폴더 아래

app.css css 폴더 아래

tailwind.css 파일에 다음 지시문을 추가합니다.

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

package.json 수정

package.json 파일을 열고 스크립트 태그 아래의 콘텐츠를 수정합니다.

  "scripts": {
    "watch:tailwind": "postcss public/css/tailwind.css -o public/css/app.css -w",
    "build": "rollup -c",
    "dev": "concurrently \"rollup -c -w\" \"npm run watch:tailwind\"",
    "start": "sirv public --no-clear --single --dev --port 5000 --host 0.0.0.0"
  },

다음은 <link rel='stylesheet' href='/css/app.css'> 파일에 index.html를 추가하는 것입니다.

이제 svelte 프로젝트에서 사용할 준비가 되었습니다tailwind.css.

tailwind가 svelte 프로젝트에서 작동하는지 테스트하려면 App.svelte (main 태그 아래) 파일에 다음 코드를 추가하세요.

<button class="inline-block bg-orange-300 hover:bg-orange-400 text-white font-bold font-heading py-6 px-8 rounded-md uppercase" type="submit">Submit</button>

홈페이지에 접속하면 아래 스크린샷과 같은 화면이 나옵니다.



그게 다야. 다음 편에서 뵙겠습니다.