TailwindCSS_環境構築検証 - Paku-Soba/Svelte-example-app GitHub Wiki
◾️ Tailwind CSSインストール及び設定方法手順
① SvelteKitプロジェクト配下にて
npm install -D tailwindcss postcss autoprefixer-
npx tailwindcss init -p- TailwindCSSをPostCSSのプラグインとしてインストールするコマンドを実行する。
② 「svelte.config.js」設定ファイルにて
-
import { vitePreprocess } from '@sveltejs/kit/vite';- vitePreprocessをインポートする。
- <style> ブロックを PostCSS として処理できるように設定する。
③ 「tailwind.config.js」設定ファイルにて
-
module.exports = { content: ['./src/**/*.{html,js,svelte,ts}'], ...// };- 本プロジェクトで使用するすべてのテンプレートファイルへのパスを追記する。
④ 「./src/app.css」ファイルを作成する。
-
@tailwind base; @tailwind components; @tailwind utilities;- Tailwindの各レイヤーに@tailwindディレクティブを追記する。
⑤ 「./src/routes/+layout.svelte」ファイルを作成する。
-
import '../app.css';- 新しく作成したapp.cssファイルをインポートする。
⑥ npm run dev -- --openコマンドを実行、プロジェクトを起動しフレームワーク反映を確認する。
- PostCSSを使用したインストール及び設定方法は、公式ドキュメントを参考にする。
CSAMC-FVFDM030P3YW:create-svelte mac-mr9v2j001$ npm install -D tailwindcss postcss autoprefixer
added 9 packages, and audited 162 packages in 2s
25 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
CSAMC-FVFDM030P3YW:create-svelte mac-mr9v2j001$ npx tailwindcss init -p
tailwind.config.js already exists.
Created PostCSS config file: postcss.config.js
CSAMC-FVFDM030P3YW:create-svelte mac-mr9v2j001$ git init && git add -A && git commit -m "Initial commit"
/Users/mac-mr9v2j001/Documents/GitHub/Svelte-example-app/create-svelte/.git/ 안의 기존 깃 저장소를 다시 초기화했습니다
[master 66cc111] Initial commit
5 files changed, 176 insertions(+), 1 deletion(-)
create mode 100644 postcss.config.js
CSAMC-FVFDM030P3YW:create-svelte mac-mr9v2j001$ npm install
up to date, audited 162 packages in 597ms
25 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
CSAMC-FVFDM030P3YW:create-svelte mac-mr9v2j001$ npm run dev -- --open
> [email protected] dev
> vite dev --open
Forced re-optimization of dependencies
VITE v4.5.1 ready in 7696 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help
- .svelteファイルにてTailwind CSSクラスを使用したサンプルコード作成。
- ブラウザ上にてTailwind CSSでスタイリングしたページの動作確認済み。
TailwindCSS.mov
Tailwind CSSサンプルコード
- create-svelte/src/routes/tailwindcss/+layout.svelte
<div>
<div class="my-5 py-5 px-5">
<slot/>
</div>
</div>
- create-svelte/src/routes/tailwindcss/+page.svelte
<script>
... 省略 ...
</script>
<!-- TailwindCSSクラスを使用したサンプルコード作成 -->
<div class="h-full px-5">
<div class="h-full w-full p-4 box-border rounded-md shadow-lg shadow-red-500/50 bg-stone-50">
<div class="mx-16 my-10">
<h1 class="px-5 font-bold text-5xl text-red-500">{title}
</h1>
</div>
<div class="mx-20">
<h2 class="font-mono font-medium text-1xl text-stone-600">{subTitle.No01}
</h2>
</div>
<div class="mx-20 my-5">
<p class="font-mono font-medium text-1xl text-stone-600">{subTitle.No02}
</p>
</div>
<div class="mx-12">
<div class="border-b rounded-full border-red-300"></div>
</div>
<div class="mx-20 my-5">
<p class="py-2 font-semibold text-2xl text-red-400">{setUpValue.No01}
</p>
<p class="font-mono font-medium text-1xl text-stone-500">{setUpValue.Explanation01}
</p>
</div>
<div class="mx-20 my-5">
<p class="py-2 font-semibold text-2xl text-red-400">{setUpValue.No02}
</p>
<p class="font-mono font-medium text-1xl text-stone-500">{setUpValue.Explanation02}
</p>
</div>
<div class="mx-20 my-5">
<p class="py-2 font-semibold text-2xl text-red-400">{setUpValue.No03}
</p>
<p class="font-mono font-medium text-1xl text-stone-500">{setUpValue.Explanation03}
</p>
</div>
<div class="mx-20 my-5">
<p class="py-2 font-semibold text-2xl text-red-400">{setUpValue.No04}
</p>
<p class="font-mono font-medium text-1xl text-stone-500">{setUpValue.Explanation04}
</p>
</div>
<div class="mx-20 my-5">
<p class="py-2 font-semibold text-2xl text-red-400">{setUpValue.No05}
</p>
<p class="font-mono font-medium text-1xl text-stone-500">{setUpValue.Explanation05}
</p>
</div>
<div class="mx-20 my-5">
<p class="py-2 font-semibold text-2xl text-red-400">{setUpValue.No06}
</p>
<p class="font-mono font-medium text-1xl text-stone-500">{setUpValue.Explanation06}
</p>
</div>
<div class="flex mx-20 mb-10 items-end justify-end">
<button class="px-4 py-2 opacity-100 rounded-lg bg-blue-500 hover:bg-blue-600 text-white shadow-lg shadow-blue-500/50">
<a href="https://tailwindcss.com/docs/installation/using-postcss"> Follow Me →</a>
</button>
</div>
</div>
</div>
- Tailwind CLI toolを使用したインストール方法での環境構築検証実施
- The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool. The CLI is also available as a standalone executable if you want to use it without installing Node.js.
- 12/8(金)時点_ビルドプロセスがうまくいかず、反映されなかった。
- インストール方法の見直し。
- Installing Tailwind CSS as a PostCSS plugin is the most seamless way to integrate it with build tools like webpack, Rollup, Vite, and Parcel.
CSAMC-FVFDM030P3YW:create-svelte mac-mr9v2j001$ npx tailwindcss -i ./src/app.css -o ./dist/app.css --watch
Rebuilding...
Done in 437ms.
^C
CSAMC-FVFDM030P3YW:create-svelte mac-mr9v2j001$ npx tailwindcss -i ./src/app.css
Rebuilding...
/*
! tailwindcss v3.3.6 | MIT License | https://tailwindcss.com
*/
◾️ 12/11 (月)時点_検証内容
- .svelteファイルにて、import文を使用及びtailwind取り込み検証。
- 反映されない為、引き続き原因調査及び検証を行う。
◾️ 12/12 (火)時点_検証及び設定修正内容
- 今何をしようとしているのか、目的を振り返る。
- 「Svelte Kitプロジェクトにて、Tailwind CSSフレームワークを反映できるようにする」のが目的であり、そのための手段と方法を考える。
- andalusia/gibraltarプロジェクト構成での設定ファイルなどを見直し。
- package.jsonにて、Tailwind CLIを使用した設定などは見当たらず。
- Tailwind CLIを使用したインストール方法ではなく、PostCSSを使用したインストール方法でTailwind CSSフレームワークを設定していることを判明。
- What is PostCSS？
- SvelteKitプロジェクトでのTailwind CSS設定方法の公式ドキュメントあり。
- 「Svelte Kitプロジェクトにて、Tailwind CSSフレームワークを反映できるようにする」のが目的であり、そのための手段と方法を考える。
-
設定修正内容
- Tailwind CSSインストール方法見直し。
- ① Tailwind CSSをPostCSSのプラグインとしてインストールする方法
npm install -D tailwindcss postcss autoprefixerコマンドにて環境構築を実施。 - ② svelte.config.js ファイルにて、vitePreprocess をインポートし、<style> ブロックを PostCSS として処理できるように設定。
- Svelte KitプロジェクトにてTailwind CSSフレームワーク反映確認済み。
- ① Tailwind CSSをPostCSSのプラグインとしてインストールする方法
- Tailwind CSSインストール方法見直し。