121 - 160 件 / 267件
タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
こんにちは、虎の穴ラボ Advent Calendar 2021 - Qiita 3日目の記事です。 2日目は「T.M」さんによる MetaworkでRails開発のデバッグをしてみよう! でした。 4日目は「Y.S」さんが DenoのFFIでMySQLに接続する の記事を書かれる予定です。 はじめに Tailwind CSS v3.0 の alpha1 が 10/2、alpha2 が 11/8 に公開されました。 今回は、その中からよく使われそうな 注目の新機能を5つ厳選して、ご紹介しようと思います。 最新の Tailwind CSS がどのような機能を実装するか、興味がある方の参考になれば、、、と思います。 Tailwind CSS Ver3.0 は 12/9 (木) にリリースされる予定です。 🤞🥵 pic.twitter.com/f700zq04wh— Adam Wathan
Tailwind CSSは便利ですが、ユーティリティクラスだけでUIを実装するのはすこし面倒です。Tailwind CSSを使ったライブラリもありますが、それらの多くは判読不能なクラスの塊をHTMLにコピペしなければなりません。確かに動作はしますが、見た目が乱雑で、メンテナンスも非常に困難です。 しかし、この問題は解決しました。プレーンのHTMLとTailwind CSSで実装された、アクセシブルでモダンなUIコンポーネントを紹介します。 Basecoat Basecoat -GitHub Basecoatとは Basecoatの準備 BasecoatのUIコンポーネント Basecoatの使い方 Basecoatとは BasecoatはTailwind CSSで構築された、あらゆるWebスタックで動作するモダンなUIコンポーネントのコレクションです。Reactは必要とせず、従来のWebサ
Tailwind CSSとはなんですか? 事前準備 TailwindCSSの導入・インストール Tailwind拡張機能 最後に 前回の記事で、Reactでのスタイリング方法についていくつか紹介しました。 dev-k.hatenablog.com 本日は、初心者向けにReactのCRAで「Tailwind CSS」を設定し、スタイリングする方法についてチュートリアルを提供します。 Tailwind CSSは、Reactでのスタイリングに非常に便利なツールであり、この記事ではその設定方法について詳しく解説します。 Tailwind CSSとはなんですか? Tailwind CSSは、ユーティリティファーストのCSSフレームワークであり、コンポーネントのスタイリングを容易にし、再利用可能なコンポーネントの作成に集中できるように設計されています。 簡単に言えば、Tailwind CSSは、独自の
インラインスタイルと Tailwind CSS と Tailwind CSS 入力補助ライブラリと Tailwind CSS in JS この記事では Tailwind CSS 自体の紹介はしません。公式ページを参照してください。 https://tailwindcss.com/ Tailwind CSS とインラインスタイル Tailwind CSS 関連の記事を目にする機会が増えました。私もプロダクトに導入してしばらく使っていますが、 CSS in JS だと 10 行だったスタイルが 1 行にまとまり、コードの見通しが非常に良くなりました。多くの方には受け入れられている印象ですが、中には「なにそれインラインスタイルと同じじゃんダメじゃん」みたいな反応も見られます。まずはこれに反論しておきたいです。 インラインスタイルの問題点 そもそもインラインスタイルにはどんな問題があるでしょう?
はじめに Tailwind CSSでは、メディアクエリを使わずにブレイクポイントで簡単にレスポンシブ対応ができます。でも、画面サイズが変わるたびに急にレイアウトが切り替わって「ガクッ」とした感じ、気になったことはありませんか? そこで便利なのが「Fluid for Tailwind CSS」。このプラグインを使うと、CSSの clamp() 関数を活用して、画面サイズに応じて要素が滑らかに変化し、より自然なデザインが実現できます。今回は、このFluidの使い方とその魅力を見ていきましょう! Fluid for Tailwind CSSとは? 「Fluid for Tailwind CSS」は、レスポンシブデザインをさらにスムーズにしてくれるプラグインです。"Fluid" とは流体という意味があり、その名の通り、デザインがまるで流れるように滑らかに調整されます。通常、Tailwindでは s
はじめに もう JavaScript や CSS なんて書きたくない! でも、綺麗で動きもある画面を作りたい! そんな人にオススメなのが Pines です コピー&ペーストだけで以下のような UI を超簡単に作れてしまいます! See the Pen Pines Accordion by Ryo Wakabayashi (@ryowakabayashi) on CodePen. See the Pen Untitled by Ryo Wakabayashi (@ryowakabayashi) on CodePen. See the Pen Untitled by Ryo Wakabayashi (@ryowakabayashi) on CodePen. See the Pen Pines Copy to Clipboard by Ryo Wakabayashi (@ryowakabayas
tailwind CSSが大人気ですね! 単一責任の原則でCSSの管理から解放されます。 tailwind CSSはユーティリティファーストなのでボタンを装飾するのにもたくさんのクラスをつける必要があります。 慣れていないとクラス名を調べる回数が多くなり、時間がかかります。 tailwind CSSに慣れている方でも慣れていない方でも時間を節約できるツールをご紹介します。 tailwind components – コンポーネント集 ボタン、フォーム、ナビゲーション、カード、ウィジェット、テーブル、ページのtailwind CSSで装飾されたコンポーネントをコピペで使えます。 https://tailwindcomponents.com/ Tailwind Toolbox – コンポーネント集 �tailwind CSSで装飾されたテンプレートやコンポーネントがコピペで使えます。 http
※(注記)本ページは、アフィリエイト広告を利用しています。 Tailwind CSSは好き嫌いが分かれるフレームワークだと思いますが、Tailwind CSSを採用しているWebサイトは確実に増えてきました。 Tailwind CSSのユーティリティファーストでどのようにマークアップするのか、ユーティリティクラスを用いたコンポーネント設計、基本的な使い方からテーマのカスタマイズやプラグインなど実践的なテクニックを詳しく解説した解説書を紹介します。 本書は、CSSのフレームワーク「Tailwind CSS」の解説書です。Tailwind CSSについては導入方法からていねいに解説されていますが、HTMLやCSSの基礎知識は解説されていません。すでにHTMLやCSSを使用して実際にWebサイトを構築している人向けです。 Tailwind CSSをこれから使用してみたい、すでに使用していてより良い使い方
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: Quicktips for ViewComponent with Tailwind CSS/Hotwire | Rails Designer 原文公開日: 2024年01月22日 原著者: Rails Designer -- Railsフロントエンド関連記事に加えて、ViewComponentとTailwind CSSを用いた美しいUIコンポーネントを販売しています 日本語タイトルは内容に即したものにしました。 フロントエンドのコードは、歴史的に少々軽く見られていました。「HTMLは本物の言語じゃない!」「CSSはサイテー!」「JavaScriptもそうだ!」。嘆かわしい話です。Railsは1個人だけの開発チームに、すべてが完全に揃った製品を構築できる本物のスーパーパワーを与えてくれるのですから。 Railsアプリ作成がさらに楽し
後日追記: 寄稿した特集がgihyo.jpにて全章無料公開されました。 Tailwind CSS実践入門 〜まず作ってから、あとで共通化する 記事一覧 | gihyo.jp 2023年2月24日発売の「WEB+DB PRESS Vol.133」に特集「Tailwind CSS実践入門——まず作ってから、あとで共通化する」を寄稿しました。 WEB+DB PRESS Vol.133、どこよりも早い表紙画像です! TypeScript最新活用、速習Ruby 3.2、Tailwind CSS実践入門を大特集!2月24日発売です!#wdpress pic.twitter.com/TaHmqI7eyq — WEB+DB PRESS編集部 (@wdpress) February 6, 2023 この特集では、すでにCSSの基本的な使い方は身につけているけどTailwind CSSについては知らない人、こ
Update: As of Tailwind CSS v2.1, the new Just-in-Time engine is included right in Tailwind CSS itself, so you don't need the @tailwindcss/jit package anymore. Learn more in the documentation. One of the hardest constraints we've had to deal with as we've improved Tailwind CSS over the years is the generated file size in development. With enough customizations to your config file, the generated CSS
WordPress+Next.js+Tailwind CSSでJamstackな爆速ブログを作るWordPressの表示速度をカイゼン Jamstack(Javascript+API+markup)なウェブサイトが流行の兆しを見せていますが、これをウェブ制作の現場にフィットするように、既存のリソースを活かしてアレンジしてみたので簡単にまとめます。Next.jsのソースコードなどはまた別の記事でとりあげます。 コスパの良いJamstackを目指す 日本国内でJamstackといえば、一般的にはmicroCMSとNext.js(or Nuxt.js)をVercelにデプロイするのがセオリーとされています。 今回は、microCMSの代わりにWordPress(レンタルサーバで運用)をヘッドレスCMSとして用いて、これを別のVPSでNext.jsを使ってSSR(サーバサイドレンダリング)/SSG
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: UI Design Tips Using Tailwind CSS for Developers | Rails Designer 原文公開日: 2024年07月04日 原著者: Rails Designer -- Railsフロントエンド関連記事に加えて、ViewComponentとTailwind CSSを用いた美しいUIコンポーネントを販売しています 日本語タイトルは内容に即したものにしました。 そこそこのUIデザインと良い優れたUIデザインの違いは、細部に隠れていて見えにくいものです。こうしたささやかな微調整は注意していないと気づきにくいのですが、削除してみると即座に違いがわかります。 本記事では、(Rails)アプリのUIで今すぐ使える、さまざまな小技について解説します。これは、私が25年以上養ってきたUIデザインの経験
Start by creating a new Next.js project if you don’t have one set up already. The most common approach is to use Create Next App.
Tailwind CSSは、今人気のCSSフレームワークです。 本書では、Tailwind CSSの概要や使い方を、初心者でもわかりやすいように紹介します。また、実際の業務に役立つ内容に絞り、シンプルにまとめています。 これからTailwind CSSを始めたいと思っている方は必見です。
本日は、初心者向けのReactアプリケーションにTailwind CSSを統合した、効果的なスタイリング方法について解説します。 初心者向けのReactで学ぶTailwind CSSチュートリアルとなります。 まず、Tailwind CSSをReactに統合する手順については以前の記事で詳しく紹介しています。 手順については、以下のリンクを参照してください。 dev-k.hatenablog.com このチュートリアルでは、すでにプロジェクトにTailwind CSSがインストールされていることを前提としていますので、その点をご了承ください。 それでは、Reactで学ぶTailwind CSSの効果的なスタイリング方法について見ていきましょう。 Tailwind CSSの特長と利点および考慮すべき短所 Tailwind CSSのカスタマイズとtailwind.config.jsファイルの重
Tailwind CSS を使っていると、class の書き順がバラバラになったり、冗長な class が増えたりなどの問題が起きてしまいました。 そこで VSCode で Tailwind CSS の自動整形をやってみました! 環境 "react": "^18.2.0", "vite": "^5.0.0" "tailwindcss": "^3.3.6", "prettier": "^3.1.0", "eslint": "^8.55.0", "eslint-plugin-tailwindcss": "^3.13.0", React + Vite の環境構築 まずは、React + Vite の環境を構築します。 npm create vite@latest my-app -- --template react-ts cd my-app npm install Tailwind CSS を導
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Cloudflare PagesでNext.jsのApplicationを動かすためにはNext.jsのEdge Runtimeとnext-on-pagesを利用する必要があります。しかし、next-on-pagesで一個の_worker.jsを生成するとglobalで実行している処理が多すぎてCPU Limitに引っかかりデプロイできないという問題がありました。 ところが、先日_worker.js directory supportが行われたおかげでそれぞれのrouteのファイルが分割されたため1workerごとの処理が軽くなりNext.jsの大きいプロジェクトでもCloudflare Pagesにデプロイできるようになりました🎉 個人的にはv3.0.0の変更でも良かったと思いますが何故かv2.20.0で更新されていました...
Supercharge React + Tailwind CSSTWC is a lightweight library to create Tailwind CSS Components in one line, write less code and build faster. import * as React from "react"; import clsx from "clsx"; const Card = React.forwardRef< HTMLDivElement, React.HTMLAttributes<HTMLDivElement> >(({ className, ...props }, ref) => ( <div ref={ref} className={clsx( "rounded-lg border bg-slate-100 text-white shad
CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
.expressive-code+.expressive-code]:border-slate-300/20 [&>.expressive-code+.expressive-code]:shadow-[0_-1px_0_theme(colors.slate.300/.1)] [&>.expressive-code]:!h-full [&>.expressive-code_.frame]:!h-full [&>.expressive-code_.frame]:!shadow-none [&>.expressive-code_.frame]:after:!hidden [&>.expressive-code_:is(.frame,pre,.frame_.header)]:![border-radius:0]">
ということに仕事で困らされて、最近それなりの時間を持っていかれた記念のメモ。 とりあえずのワークアラウンドは見出したけど、あとでどこかの誰かがもっといい感じにやってくれへんかな〜って。 やりたかったこと ViteのMultiple-Page機能を使ってアプリを作る 各Pageでは、そのページで使われてる最低限のJS・CSSのみを出力したい つまり、 たくさんのUIがあるPageA JSもCSSもそれなりのサイズになることが予想される ちょっとしたテキストがあるだけのPageB JSはおろかCSSのサイズもちょっとだけ ということがしたかった。 ViteのMPA あえて書くまでもないけど、`vite.config.js`でこういう指定をするだけ。 const { resolve } = require('path') const { defineConfig } = require('vit
こんにちは。 開発チームのワイルド担当、まんだいです。 今回の記事は Tailwind という CSS フレームワークのことを紹介したいと思います。 CSS フレームワークを選定する上でどんなフレームワークなのか概要を知りたい時に役に立てばと思います。 Tailwind とは Tailwind は CSS フレームワークです。 CSS フレームワークといえば、すぐに使える便利なコンポーネントの塊のようなイメージがありますが、 Tailwind は少しコンセプトが違っていて Utility-First を掲げた CSS フレームワークです。 Utility-First ってなんだ?となるんですが、複雑なコンポーネントをつくるための単純で扱いやすい機能を集めた、という感じになると思います。 複雑になりすぎた CSS を適度にまとめているような雰囲気です。 雰囲気としては Bootstrap の
Top quality open-source UI Kit Powerful components for Tailwind CSS. Consistent design & advanced functionalities. 500+ UI components Super simple, 1 minute installation Easy theming and customization Free hosting
Demo Blog - this repo My personal blog - modified to auto-generate blog posts with dates Karhdo's Blog - Karhdo's Blog - Karhdo's Coding Adventure (source code) SOTO's Blog - A more personalized personal website upgraded from V1 (source code) Prabhu's Blog - Prabhu's Personal website with blog (source code) Rabby Hasan's Blog - Rabby Hasan's personal blog about full stack development with cloud (s
僕がTailwind CSSをThe State of CSS 2019で初めて知り使い始めてから約1年半が経ちました。約1年半使った感想やネットで見かける疑問や勘違い(?)についてお話したいと思います。 使用環境 LPやコーポレートサイトなどのフロントページでよく採用しています。構成は主にBlade + Tailwind CSS + SCSSです。テンプレートエンジンでコンポーネント化したりSCSSでBEM風の命名のコンポーネントクラスを作成したりしています。 管理画面を構築する場合は、エコシステムの多いBootstrapを採用しています。 採用して良かったところ Tailwind CSSを採用して、一番の気に入っている部分はやはりClass名を考えなくて良くなったことです。 プログラミングで一番むずかしいことしてネーミング作業が挙げられる程にネーミングは難しく、UIごとに適切な名前を考
はじめに こんにちは。フロントエンドを軸にエンジニアをしています、いしまるといいます。 最近よく耳にするようになりました、ユーティリティクラスをたくさん用意してくれている「Tailwind CSS(以下、tailwind)」。 このユーティリティファーストのフレームワークの登場によって開発が非常にしやすくなりました。 しかし「CSS設計をしなくてもよくなるよ」とごく稀に聞くのですがそれは本当でしょうか。。。。。。 (私が文脈を吹き飛ばしただけかも) 確かに命名に頭を悩ませるといったところはあると思うのですが、ある程度ルール化は必要です。 この記事では「tailwindを使ったらCSS設計しなくてもよくなるというわけではない」ということが伝わると幸いです😇 CSS設計だいじ、だな、、、(個人の意見) ※(注記)CSS設計や、手法についてはこの記事において言及しません。 見た地獄その1: 当たってい
Flowbite - Tailwind CSS component library Get started with the most popular open-source library of interactive UI components built with the utility classes from Tailwind CSS Introduction #Flowbite is an open-source library of UI components based on the utility-first Tailwind CSS framework featuring dark mode support, a Figma design system, templates, and more. It includes all of the commonly used
Rabee UIは、Svelte ×ばつ Tailwind CSSで構築された、カスタマイズを前提としたUIコンポーネント集です。必要なUIコンポーネントのコードを自分のプロジェクトにコピーするだけで、素早く、簡単にUIを構築できます。 Svelte ×ばつ Tailwind CSSでカスタマイズRabee UIは、カスタマイズして使用することを前提とした「UIコンポーネントの種」です。デザインを変更したいときは、Tailwind CSSのクラスを組み合わせるだけで柔軟に調整できます。また、Tailwind CSSの設定ファイルを上書きすることで、プロジェクト全体のデザイントークンを一括で変更することもできます。 コンポーネント単位で使えるRabee UIはUIライブラリではなく、コードをコンポーネント単位でコピー&ペーストして使える「UIコンポーネント集」です。プロジェクトごとに、必要なUIコン
Angular CLI v11.2 からTailwind CSSの公式サポートが追加された。 コミュニティでは以前から@ngneat/tailwindのようなサードパーティライブラリによってサポートされており、そういう意味では Angular + Tailwind CSS の組み合わせ自体は今に始まったものではない。 とはいえ公式サポートされたことによりこれまでよりも多くの Angular ユーザーが Tailwind CSS を検討するようになるだろう。 この記事では Angular と組み合わせる上での Tailwind CSS の使われ方について個人的な所感をまとめる。 あくまでも所感であり、開発者コミュニティがどのようなプラクティスを支持していくかはまだこれから模索されていく段階であることを念頭に置いてもらえればと思う。 前提として、それなりに持続的な開発を見込む(メンテナビリティ
Figmaのstylesをもとにして「Tailwind CSSのテーマ」「tailwind-mergeの設定」「Storybookのドキュメント」などの各種ファイルを自動生成する#デザインシステム デザインエンジニアの安田(@_yuheiy)です。 弊社で開発しているデザインシステムのSourでは、CSSフレームワークとしてTailwind CSSを採用しています。この記事では、Sourで使用しているTailwind CSSのバージョンをアップグレードしてTailwind CSS 4に対応する際に作成した、Figmaのstylesをもとにして各種設定ファイルを自動生成する仕組みについてご紹介します。 なお、ここで紹介するものと同様の実装をGitHubでも公開しています。記事中の解説と併せて参照してください。 JavaScriptからCSSベースの設定方法への変更 Tailwind 3以前で
ReactとTailwind CSSフレームワークを使い天気のアプリケーション作成を通してReact Hooks、Fetch関数、propsなどのReactの基本的な使い方を紹介しています。 React.js環境にCSSフレームワークのTailwind CSSの設定を行った後、Tailwind CSSで作成したWeatherコンポーネントを作成します。作成したWeatherコンポーネントからAPI経由でOpenWeatherサービスから天気情報を取得して、4つの都市の天気情報をブラウザ上に表示させます。 Reactの基本的な知識のみで作成することができるのでReact入門者の人向けの文書になっています。 4つの都市の天気を表示 天気アプリケーションを作成する中で以下のことを学ぶことができます。 React環境でのTailwind CSSの設定方法Tailwind CSSの使い方APIを使っ
この記事の内容 会社で色々実験できる時間があったので、今更だけどTailwindを試してみました 結果、私には合わずCSSベタ書きが早いという結論に 導入のイチ失敗事例として読んでいただければ はじめに - どうして使うことになったのか 今勤めている会社には個人開発に使える時間があります。 各人、好きなアプリを作れるのですが、短いサイクルで作る必要があったのもあり、 弊社CTOが提供しているボイラーテンプレート(※(注記))を使って作ることにしてみました。 そちらにTailwindがデフォルトで入っていた感じです。 ※(注記) ただ、CTOには申し訳ないのですが、若干ライブラリ等が古いのでforkして使いたい方はアップデートをおすすめします...。 自分について 私自身は、普段はエンジニアをやりつつ週末にデザイナーもやっています(大学は美術系でした)。 CSSはエンジニアの中ではかなり得意な方だと思ってい
Tailwind CSS v3.4: Dynamic viewport units, :has() support, balanced headlines, subgrid, and more There's nothing like building a major new product for finding all the features you wish you had in your own tools, so we capitalized on some of that inspiration and turned it into this — Tailwind CSS v3.4. As always the improvements range from things you've been angry about for years, to supporting CSS
{ window.dispatchEvent(new CustomEvent('command-input-focus', {})); }); }else{ document.body.classList.remove('overflow-hidden'); } }) " @keydown.escape.window="commandOpen = false" class="relative z-50 w-auto h-auto"> Search (Ctrl + k) ���
この記事は ヌーラボブログリレー2025夏 の1日目として投稿しています。 明日以降の執筆予定については 夏の恒例!「ヌーラボブログリレー2025 夏」を開催します! #ヌーラボブログリレー2025夏 をご覧ください! はじめに Google Apps Script (GAS) は Google の各サービスと連携したアプリケーションを開発できるプラットフォームです。 GAS には doGet メソッドを定義することで、 UI を持つ Web アプリケーションを公開する機能があります。 この機能を使えば、サーバーサイドの GAS の関数を JavaScript から呼び出したり、動的な値を埋め込んだ HTML を生成したりすることが可能です。 しかし、 GAS には一つ大きな制約があります。 それは、 JavaScript や CSS といったクライアントサイドのアセットファイルを単体でホ
はじめに Tailwind CSS v4.0がリリースされたので、まとめてみました! TL;DR ■しかく主な変更点 パフォーマンスの大幅な向上 コンテンツの自動検出 CSSファースト設定 arbitrary valuesが簡素化された JavaScriptではなくCSSでプロジェクトを設定するようになったのが、一番大きい。(これは革命) あとは個人的にはarbitrary valuesが簡素化されたのは書きやすくはなるけど、秩序としては崩れやすいのでこの変更点はあまり好きではない...😢 Tailwind CSS v4.0とは Tailwind CSS v4.0は、パフォーマンスと柔軟性のために最適化されたフレームワークの新バージョンで、設定とカスタマイズのエクスペリエンスが一新された。 新しい高性能エンジン Tailwind CSS v4.0は、Rust製の新しいビルドエンジンOxideを
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く