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
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
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
170
Team operations that are not burdened by SRE
kazatohiei
1
210
Gleamという選択肢
comamoca
6
760
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
1
420
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
190
Deep Dive into ~/.claude/projects
hiragram
8
1.5k
技術同人誌をMCP Serverにしてみた
74th
1
370
Elixir で IoT 開発、 Nerves なら簡単にできる!?
pojiro
1
150
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
320
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
130
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
270
KotlinConf 2025 現地で感じたServer-Side Kotlin
n_takehata
1
230
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Six Lessons from altMBA
skipperchong
28
3.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
17
940
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Become a Pro
speakerdeck
PRO
28
5.4k
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ͷઃఆ͕ෆཁʹͳΔʁ ɾ։ൃதͷϏϧυαΠζͷݮ
ؾʹͳͬͨΒͬͯΈ·͠ΐ͏