Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Tailwindcssを使ってみる
Search
▲
July 06, 2021
Programming
0
220
Tailwindcssを使ってみる
社内勉強会で使った資料です
▲
July 06, 2021
Tweet
Share
More Decks by ▲
See All by ▲
サーバーレスでフロントエンドも個人開発
mismith0227
0
410
見落としがちな想定漏れ
mismith0227
0
190
Variable Font を使ってみた
mismith0227
1
210
最近のWordPressの開発環境について調べてみた
mismith0227
1
280
gulpをやめてnpm scriptを使う
mismith0227
0
160
カンパイ本町を支える技術
mismith0227
0
2.9k
WP REST APIとReact Nativeを使ってマガジンアプリを作る
mismith0227
1
2k
Material - UI v1が 出そうなので使ってみた
mismith0227
0
2.2k
なんか作ってサーバーレスに触れてみた
mismith0227
0
390
Other Decks in Programming
See All in Programming
Google I/O Extended Incheon 2025 ~ What's new in Android development tools
pluu
1
200
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
0
170
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
230
構文解析器入門
ydah
7
1.9k
CDK引数設計道場100本ノック
badmintoncryer
2
590
20250708_JAWS_opscdk
takuyay0ne
2
160
[Codecon - 2025] Como não odiar seus testes
camilacampos
0
100
QA x AIエコシステム段階構築作戦
osu
0
220
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
670
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
720
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
750
知って得する@cloudflare_vite-pluginのあれこれ
chimame
1
120
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Designing for humans not robots
tammielis
253
25k
Practical Orchestrator
shlominoach
190
11k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Building Applications with DynamoDB
mza
95
6.5k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Building Adaptive Systems
keathley
43
2.7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Transcript
5BJMXJOEDTTΛͬͯΈΔ
UBJMXJOEDTT
UBJMXJOEDTT ɾ6UJMJUZ'JSTUͷ$44ϑϨʔϜϫʔΫ ɾQCHCMVFͳͲΛDMBTTʹࢦఆ͍ͯ͘͠ ɾ#PPUTUSBQͷΑ͏ʹCUODBSEΈ͍ͨͳ ɹίϯϙʔωϯτͷDMBTT༻ҙ͞Ε͍ͯͳ͍
Ϙλϯൺֱ ˙#PPUTUSBQ CVUUPODMBTTCUOCUOQSJNBSZ #VUUPO CVUUPO ˙UBJMXJOEDTT CVUUPODMBTTCHCMVFIPWFSCHCMVFUFYUXIJUFQYQZSPVOEFETFMFDUOPOF #VUUPO CVUUPO ҰݟɺDMBTT͕ͨ͘͞Μ͚ͭΒΕ͍ͯͯ#PPUTUSBQͷ΄͏͕εοΩϦͯ͠ݟ͑Δ
ͰͳͥྲྀߦͬͯΔͷ͔
ϝϦοτᶃ ɾ$44ઃܭͷ࣌ؒΛݮΒͤΔ ɾDMBTTΛ͍͚ͯͯͩ͘ͰελΠϦϯά͢ΔͷͰ ɹDMBTT໊Λߟ͑Δඞཁ͕ͳ͍ ɾ$44ઃܭʹΑΔ)5.-ͷߏΛؾʹ͢Δඞཁ͕ͳ͍ ɹʢ)5.-ͱ$44ͷʣ
ϝϦοτᶄ ɾ΄ͱΜͲશͯͷ$44ϓϩύςΟʹର͢ΔDMBTT͕ ɹ༻ҙ͞Ε͍ͯΔͨΊɺ$44Λॻ͘ඞཁ͕ͳ͍ ɾUBJMXJOEͰ༻ҙ͞Ε͍ͯͳ͍ͷDPOpHͰ ɹ৽ͨʹࢦఆมߋΛ͢Δ
ϝϦοτᶅ ɾ#PPUTUSBQष͞Έ͍ͨͳͷ͕ͳ͍ ɾUBJMXJOEDTT͋͘·ͰϓϩύςΟʹର͢ΔDMBTT͕ ɹ༻ҙ͞Ε͍ͯΔ͚ͩͰɺ΄΅$44ͦͷͷ ɾͲΜͳϓϩδΣΫτͰಋೖ͍͢͠
࣮ࡍʹͬͯΈΔ
ࠓճ/FYUKTͰ yarn add tailwindcss@latest postcss@latest autoprefixer@latest ͢Ͱʹ/FYUKTͷڥߏஙͬͨલఏͰ ˞HVMQͰΔ߹1PTU$44ͷϓϥάΠϯͱͯ͠Ճ͢Δͱ͑ΔΈ͍ͨͰ͢
$POpHϑΝΠϧΛ࡞Δ npx tailwindcss init -p UBJMXJOEDPOpHKTͱQPTUDTTDPOpHKT͕ੜ͞ΕΔ
$POpHΛमਖ਼ module.exports = { purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*. {js,ts,jsx,tsx}"], darkMode: false,
// or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], }; 1VSHFͷઃఆΛ͢Δ͜ͱͰɺϏϧυ࣌ʹ༻ͯ͠ͳ͍DMBTTআ֎͞ΕΔ
HSPCBMTDTTΛ࡞ @tailwind base; @tailwind components; @tailwind utilities; 5BJMXJOEDTTͷελΠϧΛΠϯΫϧʔυ͢Δ
@BQQUTYͰJNQPSU import { AppProps } from "next/app"; import "tailwindcss/tailwind.css"; import
"../styles/globals.css"; function MyApp({ Component, pageProps }: AppProps) { return <Component {...pageProps} />; } export default MyApp; UBJMXJOEDTTͱDTTΛJNQPSU
σϞ
νʔτγʔτ
74DPEF֦ுػೳ
$PNQPOFOUαϯϓϧू
1MVHJO
*DPOT
UBJMXJOEDTT ɾ΄΅$44Λॻ͔ͣʹελΠϦϯάͰ͖Δ ɾΈ͋Δʢ5BJMXJOE$44͕ࢲʹ߹Θͳ͔ͬͨཧ༝ίϦεʣ ɾͰ͖ΔͰ͖ͳ͍͓ͬͯ͘ʢOUIDIJMEͰ͖ͳͦ͞͏ʣ ɾΞοϓσʔτ͕͋ΔͷͰͰ͖Δ͜ͱ૿͍͑ͯ͘
UBJMXJOEDTTKJU ࡢൃදͷλΠϜϦʔͳهࣄ
UBJMXJOEDTTKJU
UBJMXJOEDTTKJU ɾϏϧυ࣌ؒͷߴԽʢdඵ͔͔ͬͯͨͷ͕ϛϦඵఔʹ ɾͦΕʹΑͬͯશͯͷม͕σϑΥϧτͰ༗ޮʹ ɾࡉ͔͍QYࢦఆɻʢྫɿUPQ<QY>ɺUPQ<QY>ʣ ɾQVSHFͷઃఆ͕ෆཁʹͳΔʁ ɾ։ൃதͷϏϧυαΠζͷݮ
ؾʹͳͬͨΒͬͯΈ·͠ΐ͏