Hatena Blog Tags
はてなブログ トップ
tailwindcss
このタグでブログを書く

tailwindcss

このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。
好きなことを書かせて•6ヶ月前

Parcel + TypeScript + Tailwindcss環境を作ったメモ＆備忘録

まっさきにデプロイ まずはTypeScript 次はtailwindcss 問題発生！！ 次のプロジェクト、自前の開発に、Parcel + TypeScript + Tailwindcss環境を作ったメモ 自分の学習用プロジェクトの一環で、Parcel + TypeScript + Tailwindcss環境を作成したので、その備忘録として書いています。 まっさきにデプロイ vercel.com 自分はvercelのサーバーレスを利用しているので、対応のスターターを利用して最初にデプロイしてしまいます。 これは自分で作成した環境がデプロイできるのか不確かなため、確実にできるように先にしてしまい…

#parcel#tailwindcss#TypeScript

関連ブログ

KENTEM TechBlog•2年前

daisyUIでサクッとポップな画面作成

こんにちは！開発部エンジニアとしてフロントエンドを主に担当しています。 最近、心ときめくUIライブラリに出会いました・・・・ それは daisyUI です 今回はNext.jsでdaisyUIをさわってみた感想などをお伝えします！ daisyUIとは？ ライブラリのインストール 表示してみる ボタン ドロップダウン モーダル 範囲スライダー おすすめポイント JS不要でサクサク軽量 テーマが設定できる まとめ おわりに daisyUIとは？ TailwindCSSのプラグインとして使用できる、CSSライブラリです。 daisyUIには様々なコンポーネントが用意されています。 TailwindC…

#tailwindcss#daisyUI
LIFULL Creators Blog •2年前

アクセシビリティ対応のついでに色々やった話

こんにちは。エンジニアの中島です。 現在はアクセシビリティ推進グループ（以下推進グループ）に在籍しています。 以前同組織の紹介記事をいくつかあげましたが、その通り弊社は自社の運営するサービスをアクセシブルにするため日々奮闘しています。 www.lifull.blog www.lifull.blog 以前の記事ではどういったマインドで同組織ができたか、どのように推進しているかについて話ました。 今回は、そういった活動の中でいくつか技術的な副産物が生まれたのでその話をしようと思います。

#アクセシビリティ#Stimulus.js#OSS#tailwindcss
電通総研 テックブログ•3年前

Tailwind CSS入門

電通国際情報サービス、クロスイノベーション本部、オープンイノベーションラボの比嘉康雄です。今回取り上げるのはTailwind CSS。 Tailwind CSSは、最近人気急上昇のCSSフレームワークです。 メジャーなBootstrapなどのフレームワークは、あらかじめ見栄えの良いコンポーネントが用意されていて、それをカスタマイズします。それに対し、Tailwind CSSは、CSSの便利なclassが大量に用意されているだけです。それではなぜTailwind CSSの人気が上昇しているのでしょうか。 一番の原因はBootstrapなどのコンポーネントを使うと、見た目が同じ様になってしまうので…

#tailwindcss
monogusa開発メモ•4年前

WordPressのテーマ作成の備忘録①

WordPressでブログを書き始めた。 有料テーマを買うお金もないので無料のテーマを使おうと思ったのだけれど、細かい修正を入れようと思うと根が深くて修正不可能だったりする。 ならば自作してしまおうと考えたわけだが1から調べながらやるのも面倒なもの。良さげなスターターテーマを使って拡張していくことにした。 スターターテーマの検討だが、普段から使っているTailwind CSSが導入済みのものがいい。ReactやVueのようなJSフレームワークを導入済みなのがありがたい。そんなものがあるのか？ と思ったらすんなり見つかる。それがこちらのUnderscoreTW。 こちらはUnderscoresか…

#Alpinejs#tailwindcss#Laravel Mix
Leverages Tech Blog•4年前

tailwindcssを導入して感じたメリット・デメリットについて

はじめに こんにちは、レバレジーズ株式会社の牛嶋です。 レバレジーズ株式会社で、teratailをはじめとしたサービスの開発に携わっております。現在、teratail管理画面のリニューアルに取り組んでおり、技術選定にあたって、CSSフレームワークとして、tailwindcssを採用しました。 この記事では、tailwindcssを採用した理由や、実際にフロントエンド開発で使ってみて良かった点や困った点を紹介します。弊チームの他のプロジェクトでは、CSS Modulesを採用しているため、それと比較しながら紹介していけたらと思います。 tailwindcssとは tailwindcssとは、CS…

#TypeScript#tailwindcss
彦坂明宏のHatena Blog•4年前

BootstrapをPurgeCSSで軽量化（その２）

先日に続き、Start Bootstrapで提供されている無料テーマをPurgeCSSで軽量化したらどの程度になるか試してみました。 前回はClean Blogというテーマでしたが、今回はAgencyとCreativeの2つです。いずれもかなり軽量化できています。 Agency Creative どの程度軽量化できるかは、どの程度Bootstrapを使っているかに左右されますので、必ず〇％軽量化できるというものではありません。ごくごく1部しか使っていない場合は10KB程度になることもありますし、私の利用範囲でも上例同様、20KB～30KB程度になることが多いです。 tailwindCSSの場合…

#Bootstrap#PurgeCSS
フリーランス　技術調査ブログ•4年前

nextjs+tailwindcssで共通レイアウトの実装

共通レイアウト用のコンポーネント components/Laout.jsファイルを作成して下記のコーディングを行う import Head from 'next/head' import Link from 'next/link' export default function Layout({children, title= "HP by nuxtjs"}) { return ( <div className="flex justify-center items-center flex-col min-h-screen text-gray-600 text-sm font-mono"> <H…

#tailwindcss
フリーランス　技術調査ブログ•4年前

nextjsとtailwindcssのインストールと設定

nuxtjsとtailwindcssのインストール nuxtjsをインストール npx create-next-app . --use-npm tailwindcssだけインストールするとエラーが発生するため npm i tailwindcss (下記のエラーが発生する) npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! Found: postcss@8.1.7 npm ERR! node_modules/postcss npm ERR! postcss@"8…

#tailwindcss
フリーランス　技術調査ブログ•4年前

tailwindcssのグラーデーション/トランジションと問合せフォームのサンプル

問合せフォームのサンプル <section class="text-gray-600 body-font relative"> <div class="container px-5 py-24 mx-auto"> <div class="flex flex-col text-center w-full mb-12"> <h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900">お問い合わせ</h1> <p class="lg:w-2/3 mx-auto leading-relaxed text-base"…

#tailwindcss