Tailwind Ink | AI color palette generator for Tailwindcss
A tool for creating new color shades based on a neural network and trained with the Tailwindcss palette.
A tool for creating new color shades based on a neural network and trained with the Tailwindcss palette.
Tailwind CSS入門 - フロントエンドで素晴らしい開発体験を得るために - パンダのプログラミングブログ
CSSが苦手なエンジニアがTailwind CSSを使ってサイトを作ってみた Tailwind CSSはユーティリティファーストのCSSフレームワークです。 Tailwind CSSの特徴は、「1つのクラス名は1つのstyleに対応する」です。例えばmx-autoは「マージンの横方向をautoにする」というものです。 そして、Bootstrapとの違いは「button」のようなコンポーネントが存在しないことです。Tailwind CSSは、ユーティリティとして提供されるクラスを組み合わせてコンポーネントを作り上げるのです。 関連記事 Next.jsにTailwind CSSを導入する Laravel6.2にTailwind CSSを導入する Tailwind CSSと他のCSSフレームワークを分ける最大の特徴は、Tailwind CSSで作られたサイトにはいわゆる「bootstrap臭」を
GitHub - themesberg/tailwind-dashboard-windster: Free and open-source admin dashboard interface built on top of Tailwind CSS and Flowbite
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
GitHub - windicss/windicss: Next generation utility-first CSS framework.
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
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
Next.jsでTailwind CSSを使えるようにする **Next.jsとはVercelが作成しているReactのフレームワークです。**面倒な設定を書かなくてもすぐに使えるZero Configを標榜しており、実際にwebpackやTypeScriptと一緒にReactを書く際にも特別な準備は不要です。SSRにも対応しており、Reactで開発するならNext.jsかFacebook製のCreate React Appを使うのがスタンダードになっています。 **また、Tailwind CSSとはユーティリティファーストのCSSフレームワークです。**その特徴は、Tailwind CSSによって提供されるクラスを組み合わせてコンポーネントを作り、サイトをデザインしていくところにあります。さらにCSSフレームワークなので、CSSに慣れていない人でも簡単に使うことができます。 関連記事:
CommunityGetting StartedInstallationEditor SetupUsing with PreprocessorsOptimizing for ProductionBrowser SupportUpgrade GuideCore ConceptsUtility-First FundamentalsHover, Focus, and Other StatesResponsive DesignDark ModeReusing StylesAdding Custom StylesFunctions & DirectivesCustomizationConfigurationContentThemeScreensColorsSpacingPluginsPresetsBase StylesPreflightLayoutAspect RatioContainerColum
CommunityGetting StartedInstallationEditor SetupUsing with PreprocessorsOptimizing for ProductionBrowser SupportUpgrade GuideCore ConceptsUtility-First FundamentalsHover, Focus, and Other StatesResponsive DesignDark ModeReusing StylesAdding Custom StylesFunctions & DirectivesCustomizationConfigurationContentThemeScreensColorsSpacingPluginsPresetsBase StylesPreflightLayoutAspect RatioContainerColum
Next.js + TypeScript + Tailwind + Storybook プロジェクトセットアップ
はじめに 以下の設定を適応したプロジェクトセットアップを行います。 Next.js TypeScript Tailwind Storybook ESLint Prettier husky セットアップ済みのプロジェクトはこちらのリポジトリから「Use this template」をクリックすると以下の手順をベースとしたリポジトリを新規作成することが出来ます。 動作環境 node, yarn はインストール済みとします。
初心者向け：ReactアプリケーションでのTailwind CSSスタイリングガイド - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
本日は、初心者向けの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ファイルの重
みなさんこんにちは @y_temp4 です。 この記事では、先日公開された ChatGPT API を用いてコードをリファクタリングするサービスを作ってみたのでご紹介します。 サービス：Refiner - AI-based code refactoring service リポジトリ：y-temp4/refiner: The open-source Refraction alternative. このサービスは OSS にしているため、誰でもソースコードを閲覧できます！スターをつけてもらえると泣いて喜びます⭐️ 作ろうと思ったきっかけ 元々、自分は ChatGPT の API を使って何か作ろうというよりかは、OSS 製の既存のサービスの代替サービスを何か作ってみたい、というモチベーションのほうが高かったです。 OSS の代替サービスには、例えば calcom/cal.com: Sched
Tailwind Awesome
Discover the best Tailwind templates & UI kits Tailwind Awesome is a curated list of the best Tailwind templates & UI kits in the internet. We are actively searching, and curating the coolest resources out there.
【無料運用】Zennの投稿記事を使ったブログをNext.js, Tailwindcss, TypeScript, Vercelで構築した。
最初に Reactのチュートリアル、Next.jsのチュートリアル、TypeScriptの入門?を終えたので、そのアウトプットとして無料で運用出来るtechBlogを作成しようと思う。記事は新しくブログ用に書くとZennと分散してしまうのでZennに投稿している記事を使ってサイトをビルドしていく。その前、準備としてZennとGitHubを連携する必要があるのでまだ行っていない方はこちらの記事を参考にすると出来ます。 実際に作成したtechBlog モバイル版 デスクトップ版 techBlog：大学生だった 実際のコード 参考にしたデザイン MNW- mobile 構成 Next.js index.tsx 記事をzennの投稿を管理しているリポジトリから取得する。 TypeScriptでAPIの型を定義する。 [id].tsx コードのシンタックスハイライト、数式、テーブルを表示する。 co
Modern - Customizable Tailwind CSS UI Components. Meraki UI is a collection of responsive Tailwind CSS components that enhance the user experience of your website. with support for RTL languages, and a sleek Dark Mode.
CommunityGetting StartedInstallationEditor SetupUsing with PreprocessorsOptimizing for ProductionBrowser SupportUpgrade GuideCore ConceptsUtility-First FundamentalsHover, Focus, and Other StatesResponsive DesignDark ModeReusing StylesAdding Custom StylesFunctions & DirectivesCustomizationConfigurationContentThemeScreensColorsSpacingPluginsPresetsBase StylesPreflightLayoutAspect RatioContainerColum
foxtailcss.com
This domain may be for sale!
Tailwind vs. Semantic CSS Tero Piirainen @tipiirai This study compares two websites with similar design: the commercial Spotlight template from developers of Tailwind vs the same site with semantic CSS: GIST Semantic version is several times smaller, renders faster, and requires no extra CSS tooling Front page HTML The main difference: Tailwind uses "utility" classes and the semantic version uses
GitHub - aniftyco/awesome-tailwindcss: 😎 Awesome things related to Tailwind CSS
Awesome Tailwind CSS Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. Contents Useful Links IDE Extensions Plugins Tools UI Libraries, Components & Templates Starters & Themes Open-Source Projects Learning Useful Links Legend: 💙 Official resource 💙 Website - Official Tailwind CSS website. 💙 Repository - Official Tailwind CSS repository. 💙 Discussions -
Over 500+ professionally designed, fully responsive, expertly crafted component examples you can drop into your Tailwind projects and customize to your heart’s content.
Tailwind versus BEM
Spoilers! Like with so many things, the answer is “it depends.” How come? Read on. Tailwind and BEM are two approaches to writing and maintaining CSS. Comparing them is a bit like comparing apples and oranges, in that while they’re separate, they’re still fruit. This is to say that having an approach to manage your CSS—like any other code—is a good thing. Tailwind is the newer of the two, with the
CSS in JS や ユーティリティファーストな CSS など「FWは決めたものの、CSS周りは選択肢が多く決めきれない、迷う。」という方が多い様に思います。そこで、各視点を募り、参考になる様なスクラップを目指したいです。「良いところ = pros」だけを広く公募しますので、良いところをどんどん投稿してもらえると嬉しいです。
Tailwind Toolbox - Free Starter Templates for Tailwind CSS
Free Tailwind CSS Templates, Components and Resources Open source starter templates and components, a directory of handy building kits, generators, plugins and useful tools to kick start your Tailwind CSS project
Singlelink is the host of choice for web3 projects, independent creators, and others because of its freedoms from being open-source.
A free collection of Tailwind blocks & components Over 120 fully responsive component and blocks you can copy paste into your Tailwind projects. Use it in as many projects you want to and as many times you need too.
Tailwind CSS v3.4: Dynamic viewport units, :has() support, balanced headlines, subgrid, and more - Tailwind CSS
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. 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 — Tailwin
TailwindCSS Buttons
TailwindCSS Buttons A unique collection of Copy & Paste TailwindCSS buttons 🙌 <a href="#_" class="relative inline-block text-lg group"> <span class="relative z-10 block px-5 py-3 overflow-hidden font-medium leading-tight text-gray-800 transition-colors duration-300 ease-out border-2 border-gray-900 rounded-lg group-hover:text-white"> <span class="absolute inset-0 w-full h-full px-5 py-3 rounded-l
大嫌いだったユーティリティーファーストCSS（TailwindCSS）と向き合った話 - Qiita
最近、業務にTailwindCSSとAstroを取り入れ始めました。 ここではそれまでの苦悩、導入までの軌跡や工夫についてご紹介します。 育った環境 私が社会人になるころにちょうどWeb標準という言葉が浸透し、「世の中はXHTMLでマークアップはセマンティックであるべし！」という価値観で育ちました。 CSSは名前の通り、カスケードするから良いものだと思っていましたし、クラス名はデザインの都合ではなく、機能や意味からつけることが幸福につながると信じていました。 当時は大量コーディングをより効率よく行うためにコマンドラインのプログラムをつくってXPathで抽出・変換し少しでも作業を軽減できないか試行錯誤したり、複数人でのコーディングをどのように効率よくまわせるか考えたり、HTMLをXMLとして捉えて、当時のXHTMLの思想に則って業務を進めていました。 XHTMLは廃れ、それほど厳格性を求めら
Next.js(v11.1)+TypeScript+Tailwind+SASS+Storybook+Jestのボイラープレート
先日、Next.js 11.1がリリースされました。 Storybookの最新版インストールを試してみたのですが、中々うまくいかなかったりしたので、環境の整理ついでにボイラープレートとしてまとめてみました。 構成は以下のようになっています。 yarn Next.js v11.1.0 ESLint v7.32.0(Next.js v11.1から含まれるように) TypeScript v4.4.2 Tailwind v2.2.8 Storybook v6.3 Prettier v2.3.2 Jest v27.1.0 コードの全体はこちらです。 Next.js インストール
【Tailwind CSS】Tailwind VariantsでTailwind CSSを次のレベルへ引き上げよう
はじめに 今回は、Tailwind CSSを次のレベルにするためにTailwind Variantsによるスタイリングをしようという内容です。 Tailwind CSSは書きやすいですし、かなり使い心地がいいですが、ある点についてのみ圧倒的な短所があります。 それが「クラス名長すぎ問題」です。 私はよく以下のようなことを感じたりします。 おそらく、Tailwind CSSを使った人がある方なら一度は思ったことあるのではないでしょうか。 そんなTailwind CSSの短所を解決できると感じたものがTailwind Variantsです。 Tailwind Variantsとは 以下は、ドキュメントから抜粋したTailwind Variantsの定義です。 Tailwind VariantsとはTailwind CSSの機能とファーストクラスのVariant APIを組み合わせたライブラリで
GitHub - tailwindlabs/tailwindcss-forms: A plugin that provides a basic reset for form styles that makes form elements easy to override with utilities.
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
ReactとTailwind CSSフレームワークを使い天気のアプリケーション作成を通してReact Hooks、Fetch関数、propsなどのReactの基本的な使い方を紹介しています。 React.js環境にCSSフレームワークのTailwind CSSの設定を行った後、Tailwind CSSで作成したWeatherコンポーネントを作成します。作成したWeatherコンポーネントからAPI経由でOpenWeatherサービスから天気情報を取得して、4つの都市の天気情報をブラウザ上に表示させます。 Reactの基本的な知識のみで作成することができるのでReact入門者の人向けの文書になっています。 ４つの都市の天気を表示 天気アプリケーションを作成する中で以下のことを学ぶことができます。 React環境でのTailwind CSSの設定方法Tailwind CSSの使い方APIを使っ
UIキットやブロック・コンポーネント集など、「Tailwind CSS」を使用する際に参考になるリソースのまとめです。 既にTailwind CSSを使い慣れている人は活用することでよりスピーディに且つ楽に制作できるようになりますし、これからTailwind CSSを使う予定だけど公式のドキュメントだけだといまいちピンとこない人は、紹介するものをいくつか眺めてみると「こんな見栄えも表現できるのか」とか「この見栄えはこの組み合わせ方で再現できるか」など把握するのに役立つと思います。 Tailwind UI Tailwind CSSの作者が公開している公式のコンポーネント集です。 有償で且つすべてのコンポーネントを使用したい場合は金額が少しネックになるかもですが、300種類以上利用できる以外にもページレベルで用意されているものも利用可能になり、現時点では購入後もアップデートは無料とアナウンスさ
コピペで簡単に実装できる！ Tailwind CSSで実装されたボタンの最新コレクション -Tailwind CSS button collection
Webサイトの外観を向上させるためにデザインされた、Tailwind CSSで実装されたボタンのコレクションを紹介します。 ボタンの実装はJavaScriptは無し、Tailwind CSSで実装されたさまざまなエフェク...記事の続きを読む
GPT-3 Tailwind CSS Code Generator Build Tailwind CSS code snippets using the power of OpenAI's GPT-3. Sign up for the waiting list What is Tailwind CSS? Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override. What is GPT-3? GPT-3 (Generative Pret
TailwindTemplates
Lightning fast prototyping A repository of free components built with tailwindcss. Every component is responsive, customizable and carefully crafted for your use.
Create reusable Tailwind CSS + React components – TWC
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
Tailwind CSS の hover: を、非活性な要素やタッチ操作に適用させない ～ addVariant の活用
背景 以前公開した記事で、単純な :hover セレクタの問題点を書きました。 詳しくは上記の記事に書いていますが、要約すると問題は大きく以下の 2 点です。 スマホなどのタッチデバイスでもホバースタイルが適用されてしまう disabled 状態の button など、クリックしても反応しない要素にもホバースタイルが適用されてしまう これらの問題が次のようなメディアクエリと疑似クラスを組み合わせたスタイル記述によって解決できることを紹介しました。 @media (hover: hover) { .class:where(:any-link, :enabled, summary):hover { /* ホバースタイル */ } } 今回はこれを Tailwind CSS で実現するには？ という記事です。 確認した環境 Tailwind CSS v3.4.1 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
GitHub - konstaui/konsta: Mobile UI components made with 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
Build modern websites right in your browser on top of your codeImpossible Dev Tools for React and Tailwind Web development has gone a long way! But writing HTML manually still sucks. React and Tailwind made it an infinitely better experience for me, but something was still missing. Switching between the code and the browser all the time felt wrong. At the same time, I felt lost with no-code editor
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WordPress+Next.js+Tailwind CSSでJamstackな爆速ブログを作る | KYONOHALKYO
Next.jsにTailwind CSSを導入する - パンダのプログラミングブログ
Install Tailwind CSS with Next.js - Tailwind CSS
Customizing Colors - Tailwind CSS
ChatGPT APIでコードのリファクタリングをするサービスを作りました - Qiita
Meraki UI Tailwind CSS Components
Install Tailwind CSS with Create React App - Tailwind CSS
Tailwind vs Semantic CSS
Tailwind CSS Components - Tailwind UI
CSS ソリューション pros/cons の pros だけを集める回
Singlelink - The open-source Linktree alternative
Wicked Blocks - 120+ Free Tailwind Components
React + Tailwind CSS+APIで天気アプリケーション作成 | アールエフェクト
UIキットやブロック・コンポーネント集など、Tailwind CSS使用時の参考リソース - NxWorld
GPT-3 Tailwind CSS Code Generator with OpenAI
GitHub - tokencss/tokencss
Impulse – Impossible Dev Tools for React and Tailwind
www.yamache.com
x.com
www.keigoman.com
kdm-a.com
unevieconfortable.com
news.yahoo.co.jp