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
200
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
270
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
SODA - FACT BOOK
sodainc
1
1.1k
つよそうにふるまい、つよい成果を出すのなら、つよいのかもしれない
irof
1
290
XSLTで作るBrainfuck処理系
makki_d
0
210
Javaに鉄道指向プログラミング (Railway Oriented Pro gramming) のエッセンスを取り入れる/Bringing the Essence of Railway-Oriented Programming to Java
cocet33000
2
580
関数型まつり2025登壇資料「関数プログラミングと再帰」
taisontsukada
2
840
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
320
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
130
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
140
社内での開発コミュニティ活動とモジュラーモノリス標準化事例のご紹介/xPalette and Introduction of Modular monolith standardization
m4maruyama
1
130
Cline指示通りに動かない? AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
kamomeashizawa
1
560
セキュリティマネジャー廃止とクラウドネイティブ型サンドボックス活用
kazumura
1
190
Cursor Meetup Tokyo ゲノミクスとCursor: 進化と制約のあいだ
koido
2
1k
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Automating Front-end Workflow
addyosmani
1370
200k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.9k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
How to Ace a Technical Interview
jacobian
277
23k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Making Projects Easy
brettharned
116
6.2k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
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ͷઃఆ͕ෆཁʹͳΔʁ ɾ։ൃதͷϏϧυαΠζͷݮ
ؾʹͳͬͨΒͬͯΈ·͠ΐ͏