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
Googleのテストサイズを活用したテスト環境の構築
toms74209200
0
270
EventSourcingの理想と現実
wenas
6
2.1k
macOS でできる リアルタイム動画像処理
biacco42
7
1.9k
offers_20241022_imakiire.pdf
imakurusu
2
360
Why Spring Matters to Jakarta EE - and Vice Versa
ivargrimstad
0
1k
WEBエンジニア向けAI活用入門
sutetotanuki
0
300
Jakarta Concurrencyによる並行処理プログラミングの始め方 (JJUG CCC 2024 Fall)
tnagao7
1
230
/←このスケジュール表に立ち向かう フロントエンド開発戦略 / A front-end development strategy to tackle a single-slash schedule.
nrslib
1
590
役立つログに取り組もう
irof
27
8.7k
C#/.NETのこれまでのふりかえり
tomokusaba
1
160
VR HMDとしてのVision Pro+ゲーム開発について
yasei_no_otoko
0
100
Java ジェネリクス入門 2024
nagise
0
610
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
Making Projects Easy
brettharned
115
5.9k
Writing Fast Ruby
sferik
626
61k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
For a Future-Friendly Web
brad_frost
175
9.4k
Producing Creativity
orderedlist
PRO
341
39k
Building Your Own Lightsaber
phodgson
102
6.1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Thoughts on Productivity
jonyablonski
67
4.3k
GraphQLとの向き合い方2022年版
quramy
43
13k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
14
1.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ͷઃఆ͕ෆཁʹͳΔʁ ɾ։ൃதͷϏϧυαΠζͷݮ
ؾʹͳͬͨΒͬͯΈ·͠ΐ͏