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
170
Tailwindcssを使ってみる
社内勉強会で使った資料です
▲
July 06, 2021
Tweet
Share
More Decks by ▲
See All by ▲
サーバーレスでフロントエンドも個人開発
mismith0227
0
370
見落としがちな想定漏れ
mismith0227
0
140
Variable Font を使ってみた
mismith0227
1
160
最近のWordPressの開発環境について調べてみた
mismith0227
1
240
gulpをやめてnpm scriptを使う
mismith0227
0
130
カンパイ本町を支える技術
mismith0227
0
2.8k
WP REST APIとReact Nativeを使ってマガジンアプリを作る
mismith0227
1
1.8k
Material - UI v1が 出そうなので使ってみた
mismith0227
0
2.2k
なんか作ってサーバーレスに触れてみた
mismith0227
0
360
Other Decks in Programming
See All in Programming
EMになってからチームの成果を最大化するために取り組んだこと/ Maximize team performance as EM
nashiusagi
0
100
Laravel や Symfony で手っ取り早く OpenAPI のドキュメントを作成する
azuki
2
120
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
250
ペアーズにおけるAmazon Bedrockを⽤いた障害対応⽀援 ⽣成AIツールの導⼊事例 @ 20241115配信AWSウェビナー登壇
fukubaka0825
6
2k
OSSで起業してもうすぐ10年 / Open Source Conference 2024 Shimane
furukawayasuto
0
110
エンジニアとして関わる要件と仕様(公開用)
murabayashi
0
300
みんなでプロポーザルを書いてみた
yuriko1211
0
280
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
150
Nurturing OpenJDK distribution: Eclipse Temurin Success History and plan
ivargrimstad
0
960
Generative AI Use Cases JP (略称:GenU)奮闘記
hideg
1
300
Better Code Design in PHP
afilina
PRO
0
130
CSC509 Lecture 12
javiergs
PRO
0
160
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
95
5.2k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.3k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
Facilitating Awesome Meetings
lara
50
6.1k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Designing Experiences People Love
moore
138
23k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Automating Front-end Workflow
addyosmani
1366
200k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
A Philosophy of Restraint
colly
203
16k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
24k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
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ͷઃఆ͕ෆཁʹͳΔʁ ɾ։ൃதͷϏϧυαΠζͷݮ
ؾʹͳͬͨΒͬͯΈ·͠ΐ͏