👋

Svelte, Vite, TailWind.cssでプロジェクトを作成する

2022/05/15に公開

TypeScript

はじめに

目標設定としてSvelte、Vite、Tailwind.cssを扱えるようにする。

なぜTailWind.cssなのか

まずは、レスポンシブに対応しているから。これは、自分が新しくアプリを作成する上でCSSを学ぶ時間を短縮できないかと思い、このフレームワークにたどり着きました。
Bootstrapでない理由としては、自分が実務で使用しているのでまだ使用ししたことのないもの、流行りの物を使いたかったのでこちらを採用しました。

なぜViteなのか

上記同様に、webpackは実務で使用しているので別のものを使用したかった。他にも色々ありましたが、Viteの開発者がVueの開発者であったことも参考にしました。esbuildなどのビルドツールもありましたがそちらはGo言語で、自分の好きな言語でもあるのでとても惹かれましたが、、、Viteもesbuildを使用した上で開発されていて、esbuildの次に早いこともありこちらを採用しました。

プロジェクトの作成

ViteとTypeScriptをサポートするSvelteアプリケーションをセットアップするには、プロジェクトフォルダーを作成し、そのフォルダー内で次のコマンドを実行します。
npm init vite@latest
プロジェクト名、パッケージ名を入力して、フレームワークを選択します（今回はsvelte）。
svelteかsvelte-tsを選択するとプロジェクトが作成されます。

作成したプロジェクトに移動
cd svelte-app

次に、以下のコマンドを実行して、デフォルトの依存関係をインストールします。
npm install

下記のコマンドは、単純なTypeScriptボイラープレートアプリケーションを作成します。以下のコマンドを使用して開発サーバーを起動することにより、テストできます。
npm run dev

Tailwind.cssの導入

Tailwind.cssをインストールする
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

オプションで、-pフラグを含めて、基本的なpostcss.config.jsファイルを同時に生成できます。
npx tailwindcss init -p

ESモジュールに依存するVite2を使用しています。したがって、ViteでTailwindを実行するには、構成ファイルを編集する必要があります。
tailwind.config.jsファイルに移動し、次のように編集します。

tailwind.config.js

export default {
  plugins: [],
    theme: {
    extend: {},
  },
  purge: ["./index.html",'./src/**/*.{svelte,js,ts}'], // for unused CSS
  variants: {
    extend: {},
  },
  darkMode: false, // or 'media' or 'class'
}

また、このような拡張子を持つファイルから未使用のCSSを削除するために、index.html、svelte、js、およびtsファイルをパージに含めました。

また、postcss.config.jsを次のように更新します。
通常、これはTailwindをプラグインとしてpostcss.config.jsファイルに追加することを意味します。

postcss.config.js

import tailwind from 'tailwindcss'
import tailwindConfig from './tailwind.config.js'
import autoprefixer from 'autoprefixer'

export default {
  plugins:[tailwind(tailwindConfig),autoprefixer]
}

postcss.config.jsのpostcssをvite.config.jsファイルに適用して、TailwindCSS構成を定義します。

vite.config.js

import postcss from './postcss.config.js';
import { svelte } from '@sveltejs/vite-plugin-svelte'
import { defineConfig } from 'vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [svelte()],
  css:{
    postcss
  }
})

プロジェクトのsrcディレクトリ内に、TailwindCSS.svelteファイルを作成します。 Tailwindのベース、コンポーネント、およびユーティリティを組み込むには、以下に示すように、このコードに@tailwindタグを追加します。

TailwindCSS.svelte

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

このスタイルは、globalキーワードを使用したため、アプリケーションでグローバルに適用されます。

TailwindCSS.svelteファイルをscriptタグ内のApp.svelteファイルにインポートします。

App.svelte

import TailwindCss from './TailwindCSS.svelte'

スクリプトタグの直後で、TailwindCSSコンポーネントを呼び出して、全体的なスタイル設定を適用します。