svelte tailwindcss 세팅 (sveltekit XXX)

기존에 리액트에 tailwindcss 세팅을 한 적이 있었는데 svelte에 적용시키려고 레퍼런스를 찾으려다 보니 죄다 sveltekit 관련한 것들이 주를 이루었었는데 물론 큰 차이는 없겠지만 svelte 프로젝트에 세팅하는 법을 한 번 찾아 보다 좋은 글을 찾았다. 

 

https://codingcat.dev/post/install-tailwindcss-in-svelte-with-1-command

 

위 글에서 찾은 내용을 요약하면 

 

1. 설치 후 업데이트

npx svelte-add tailwindcss
npm install

 

2. tailwindcss.config.js , postcss.config.js, svelte.config.js 파일 세팅

 

// svelte.config.js

import preprocess from 'svelte-preprocess';

export default {
  // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
  // for more information about preprocessors
  preprocess: preprocess({
    postcss: true
  }),
};

 

//postcss.config.js

const tailwindcss = require('tailwindcss');
const autoprefixer = require('autoprefixer');

const config = {
  plugins: [
    //Some plugins, like tailwindcss/nesting, need to run before Tailwind,
    tailwindcss(),
    //But others, like autoprefixer, need to run after,
    autoprefixer
  ]
};

module.exports = config;

 

 

// tailwindcss.config.js

/** @type {import('tailwindcss').Config}*/
const config = {
  content: ["./src/**/*.{html,js,svelte,ts}"],

  theme: {
    extend: {},
  },

  plugins: [],
};

module.exports = config;

 

3. 삼형제 추가  (App.svelte 파일에 추가)

 

<style lang="postcss">
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
</style>

 

4. 마지막 파일 추가

 

import './app.postcss';

 

4번 단계 같은 경우 1번에서의 명령어를 실행하면 app.postcss 라는 파일이 생기는데 메인 스벨트 파일 (app.svelte )에 넣어주니 정상 작동 했다. 

 

<div class="relative flex flex-col justify-center min-h-screen overflow-hidden">
    <div
            class="w-full p-6 m-auto bg-white rounded-md shadow-xl shadow-rose-600/40 ring ring-2 ring-purple-600 lg:max-w-xl"
    >
        <h1 class="text-3xl font-semibold text-center text-purple-700 underline uppercase decoration-wavy">
            Login
        </h1>
        <div class="mb-2">
            <label
                    htmlFor="email"
                    class="block text-sm font-semibold text-gray-800"
            >
                Email
            </label>
            <input
                    type="email"
                    class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
            />
        </div>
        <div class="mb-2">
            <label
                    htmlFor="password"
                    class="block text-sm font-semibold text-gray-800"
            >
                Password
            </label>
            <input
                    type="password"
                    class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
            />
        </div>
        <div class="mt-6">
            <button
                    id={'login-button'}
                    class="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-purple-700 rounded-md hover:bg-purple-600 focus:outline-none focus:bg-purple-600"
            >
                Login
            </button>
        </div>

        <p class="mt-8 text-xs font-light text-center text-gray-700">
          <span
                  class={'font-medium text-purple-600 hover:underline cursor-pointer'}
          >
            Sign up
          </span>
        </p>
    </div>
</div>