[Svelte] svelte에 tailwind CSS 적용하기 (feat. webpack)

svelte 프로젝트에서 tailwind css를 적용하는 과정에서 애를 먹었다.

결과적으로 간단했던 것인데 처음 세팅해 보는 거라 어려웠다 🥲

 

필수 패키지 설치

npm i -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

로 tailwind 초기화해주고나서

 

추가로, webpack을 위해

npm i -D style-loader css-loader postcss-loader

까지 설치해 준다.

 

tailwind.config.js

content에 하위 내용을 입력해 준다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,svelte,ts}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

 

postcss.config.js

postcss 설치하면 자동으로 파일이 생길 것이다.

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

 

webpack.config.js

css loader의 경우, 입력 순서 뒤에서 부터 진행된다.

순서에 유념해서 작성해야 한다.

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.svelte$/,
        use: {
          loader: 'svelte-loader',
          options: {
            // ...
            preprocess: sveltePreprocess({
        postcss: {
          plugins: [tailwindcss, autoprefixer]
        }
      })
      }
    }
    },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader'
        ]
      },
    ]
  },
  // ...
};

 

App.svelte

가장 상위의 svelte 파일에 입력해 준다.

global 키워드를 꼭 입력해줘야 한다.

<style global>
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
</style>

 

Test.svelte

<p class="text-pink-300 border-amber-800 bg-amber-100">
    test
</p

 

class에서 스타일을 입력해 주면 정상적으로 tailwind가 적용될 것이다!