daisyUI / Tailwind CSS メモ
hagiwaraSvelte プロジェクトに Tailwind CSS を追加する
npx svelte-add@latest tailwindcss
svelte-add/tailwindcss: Add Tailwind CSS to your Svelte project https://github.com/svelte-add/tailwindcss
hagiwaraSvelte / SvelteKit メモ https://zenn.dev/link/comments/c6cf544c08c9c5
hagiwaraPrettier プラグイン
tailwindlabs/prettier-plugin-tailwindcss: A Prettier plugin for Tailwind CSS that automatically sorts classes based on our recommended class order. https://github.com/tailwindlabs/prettier-plugin-tailwindcss
hagiwaraVS Code 機能拡張
Tailwind CSS IntelliSense - Visual Studio Marketplace
設定を追加
{
...
"tailwindCSS.emmetCompletions": true,
"editor.quickSuggestions": {
"strings": "on"
}
}
prettier-plugin-tailwindcss の class 属性値並べ替えが .svelte ファイルで動作せず困っていたが、なんやかんや試したのち最初からやり直したらなんか動いた
- プラグインをインストール
npm install -D prettier prettier-plugin-svelte prettier-plugin-tailwindcss
- VS Code の設定で defaultFormatter を prettier に変更
"[svelte]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
- .prettierrc ファイルを追加
{
"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"]
}
.prettierrc ファイルを追加すると VS Code で設定したのが効かなくなるので実際は他の設定も追加
{
"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
"semi": false,
"singleQuote": true,
"printWidth": 120
}
daisyUI を追加する
npm i daisyui
module.exports = {
//...
plugins: [require("daisyui")],
}
Install daisyUI as a Tailwind CSS plugin — Tailwind CSS Components https://daisyui.com/docs/install/
hagiwaraTailwind CSS Typography プラグインを追加する
npm install -D @tailwindcss/typography
module.exports = {
//...
plugins: [
require("@tailwindcss/typography"),
require("daisyui")
],
}
@tailwindcss/typography - Tailwind CSS https://tailwindcss.com/docs/typography-plugin
hagiwara- 適用したい要素に
proseclass 属性値を追加する - 適用してる要素の子要素に適用したくない場合は
not-proseclass 属性値を追加する
<article class="prose">
<!-- 適用される -->
...
<div class="not-prose">
<!-- 適用されない-->
...
</div>
</article>
-
max-widthを無効にしたい場合、max-w-noneclass 属性値を追加する - デフォルトは
max-width: 65ch;
hagiwaraサイズや色のバリエーションもあるっぽい
#後で見る
@tailwindcss/typography - Tailwind CSS https://tailwindcss.com/docs/typography-plugin#advanced-topics
hagiwaradaisyUI 以外のコンポーネント集
hagiwaraFlowrift
hagiwaraFlowbite - Build websites even faster with components on top of Tailwind CSS
Flowbite-Svelte
Flowbite Svelte Blocks Flowbite-Svelte-Block
hagiwaraPreline UI, crafted with Tailwind CSS
hagiwaraTailwind Elements - 500+ free Tailwind CSS components
hagiwaraSkeleton — UI Toolkit for Svelte + Tailwind
hagiwaraKonsta UI - Mobile UI components built with Tailwind CSS
hagiwaraSveltestrap
hagiwaraその他のリソース