🥳

【2024年】Svelte + Vite + TailwindCSSの環境構築

2024/01/27に公開

TypeScript

まず初めに

Svelteの環境構築が少し厄介だったことに加えて、SvelteにTailwindCSSを組み込む記事がなかったので備忘録として書きました。

記事の対象者

Svelte初学者
SvelteでTailwindCSSが使いたい人

環境構築

Svelte

まずはSvelteの環境構築をしましょう。

$ npm create vite@latest

✔ Project name: … svelte-demo
✔ Select a framework: › Svelte
✔ Select a variant: › TypeScript

Svelteの公式ドキュメントに載っている下記のコマンドを実行すると、Svelte + Svelte Kitの環境構築がなされてしまう罠があります。

$ npm create svelte@latest

https://svelte.jp/

作成したフォルダをVSCodeで開きましょう。
下記のコマンドでローカルサーバーが立ち上がれば成功です。

$ npm run dev

srcディレクトリの中のApp.svelteを見るとscriptタグ部分にエラーが吐かれる可能性があります。この場合は、下記のコマンドを実行し、VSCodeでフォルダを開き直してください。

$ npm install

また、main.tsのtargetに型エラー出るが場合は、!マークを書き加えましょう。

main.ts

import './app.css'
import App from './App.svelte'

const app = new App({
+ target: document.getElementById('app')!,
- target: document.getElementById('app'),
})

export default app

Svelteの拡張機機能をまだ入れていない人は入れといてください。

TailwindCSS

次にTailwindCSSの環境構築をしていきます。

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

インストールが成功すると、tailwind.config.jsというファイルが作成されます。
content部分に追記しましょう。

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
+  content: ["./index.html", "./src/**/*.{js,ts,svelte}"],
-  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

app.cssの中身を全て削除し、下記を貼り付けましょう。

app.css

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

VSCodeにTailwindCSSの拡張機能をまだ入れていない場合は入れておいてください。

TailwindCSSが環境構築できてるか確かめるために、app.svelteの中身を全て削除し、下記のコードを貼り付けましょう。

app.svelte

<script lang="ts">

</script>

<h1 class="text-5xl text-orange-600">Hello! Svelte</h1>

<style>

</style>

下記のコマンドでローカルサーバーを立てましょう。

$ npm run dev

こうなってれば成功です。

まとめ

ここまでお疲れ様でした。普段はReactを中心にwebのフロントエンドに関する発信を行っているので、よかったら他の記事も読んでいただけると嬉しいです。

【2024年】Svelte + Vite + TailwindCSSの環境構築

まず初めに

記事の対象者

環境構築

Svelte

TailwindCSS

まとめ

おすすめの記事

Discussion