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
LaravelとTailwindCSSで始めるコンポーネント指向UI
Search
kubotak
October 02, 2021
Programming
3
1.9k
LaravelとTailwindCSSで始めるコンポーネント指向UI
PHP Conference Japan 2021
2021/10/02 17:35〜 Track4 Regular session (25 mins)
kubotak
October 02, 2021
Tweet
Share
More Decks by kubotak
See All by kubotak
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
460
情報漏洩させないための設計
kubotak
7
2.3k
Svelteコンポーネントの依存関係に秩序を〜
kubotak
0
160
DMARCレポート可視化ツールを SvelteKitで作った話
kubotak
2
560
Superforms本番投入で分かった良さとハマりどころ
kubotak
0
940
Storybookを書くだけでリグレッションテストが 実行される世界へようこそ
kubotak
31
11k
(うまくいった||いかなかった) 技術選定は何を考えていたか
kubotak
1
1.3k
ウォーターフォールに思えたプロジェクトにあったアジャイルの要素
kubotak
2
820
Felteで作る簡単フォームバリデーション
kubotak
1
1.7k
Other Decks in Programming
See All in Programming
為你自己學 Python - 冷知識篇
eddie
1
310
SOCI Index Manifest v2が出たので調べてみた / Introduction to SOCI Index Manifest v2
tkikuc
1
110
令和最新版手のひらコンピュータ
koba789
14
8.2k
WebAssemblyインタプリタを書く ~Component Modelを添えて~
ruccho
1
940
Jakarta EE Core Profile and Helidon - Speed, Simplicity, and AI Integration
ivargrimstad
0
260
A Gopher's Guide to Vibe Coding
danicat
0
190
Namespace and Its Future
tagomoris
6
660
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
740
AIエージェント開発、DevOps and LLMOps
ymd65536
1
370
OSS開発者という働き方
andpad
5
1.5k
コーディングは技術者(エンジニア)の嗜みでして / Learning the System Development Mindset from Rock Lady
mackey0225
2
630
【第4回】関東Kaggler会「Kaggleは執筆に役立つ」
mipypf
0
950
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Embracing the Ebb and Flow
colly
87
4.8k
For a Future-Friendly Web
brad_frost
179
9.9k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
How GitHub (no longer) Works
holman
315
140k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Into the Great Unknown - MozCon
thekraken
40
2k
Unsuck your backbone
ammeep
671
58k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Site-Speed That Sticks
csswizardry
10
800
Thoughts on Productivity
jonyablonski
69
4.8k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
Transcript
Copyright© M&A LaravelͱTailwindCSSͰ࢝ΊΔ ίϯϙʔωϯτࢦUI PHPConference 2021 @ Kenjiro Kubota
Copyright© M&A Profile kubotak-is kubotak_public kenjiro.kubota M&A (Java|Type)Script PHP https://kubotak.page
Copyright© M&A Laravel.Shibuya Laravel PHP IRT oVice 10/20 https://laravel-shibuya.connpass.com/event/ 226
296 /
Copyright© M&A Blade Components TailwindCSS
Copyright© M&A input a button AtomicDesign Atoms
Copyright© M&A CSS CSS CSS 1
Copyright© M&A CSS SOLID
Copyright© M&A Index Blade Blade Components TailwindCSS Laravel TailwindCSS Blade
Components UI
Copyright© M&A Blade
Copyright© M&A Blade Blade Laravel .blade.php PHP resources/views storage/framework/views
Copyright© M&A Blade Blade
Copyright© M&A Blade Blade @ Blade
Copyright© M&A Blade Blade @include
Copyright© M&A Blade Blade @yield
Copyright© M&A Blade Blade
Copyright© M&A Blade Blade @extends
Copyright© M&A Blade Blade @section yield
Copyright© M&A Blade Components
Copyright© M&A Blade Components Blade Components Blade Laravel 5.4 5.6
7.x 7.x
Copyright© M&A Blade Components Blade Components 2 Artisan
Copyright© M&A Artisan app/View/Components/Alert.php resources/views/components/alert.blade.php blade
Copyright© M&A app/View/Components/Alert.php
Copyright© M&A resources/views/components/alert.blade.php
Copyright© M&A resources/views/components/alert.blade.php
Copyright© M&A Components x-
Copyright© M&A Components x- components ⾒ ) components/alert/success.blade.php => <x-alert.success>
Copyright© M&A Props
Copyright© M&A Props Props ⾒ :type= $hoge
Copyright© M&A Props Props
Copyright© M&A Props public
Copyright© M&A resources/views/components Blade resources/views/components/button.blade.php <x-button></x-button>
Copyright© M&A props
Copyright© M&A props props ⾒
Copyright© M&A props props
Copyright© M&A slot $slot
Copyright© M&A slot extends slot @extends @slot
Copyright© M&A Named slot 築 Slot Slot
Copyright© M&A Named slot 築 Slot Slot
Copyright© M&A BladeComponents Vue.js SFC(Single File Component) PhpStorm Laravel Laravel
Idea VSC
Copyright© M&A TailwindCSS
Copyright© M&A TailwindCSS TailwindCSS Utility First CSS Utility First .button
witdh margin CSS .w- 0 .m- 0
Copyright© M&A TailwindCSS CSS CSS TailwindCSS HTML
Copyright© M&A
Copyright© M&A TailwindCSS Pros/Cons Pros CSS CSS (SMACSS,BEM,etc) CSS Cons
CSS TailwindCSS Chrome dev tool CSS
Copyright© M&A TailwindCSS TailwindCSS CSS HTML JavaScript React Vue HTML
HTML CSS
Copyright© M&A Laravel TailwindCSS
Copyright© M&A Laravel TailwindCSS npm tailwindcss init tailwind.config.js
Copyright© M&A Laravel TailwindCSS tailwind.config.js purge CSS
Copyright© M&A Laravel TailwindCSS resources/css/app.css tailwindcss webpack.mix.js
Copyright© M&A Laravel TailwindCSS HTML CSS OK
Copyright© M&A Blade Components UI
Copyright© M&A Button
Copyright© M&A Button props
Copyright© M&A Button
Copyright© M&A Button
Copyright© M&A Button stylesProps
Copyright© M&A Button
Copyright© M&A Button stylesProps
Copyright© M&A Button props
Copyright© M&A Form&Input Input
Copyright© M&A Form&Input Input type text
Copyright© M&A Form&Input Input placeholder ⾒
Copyright© M&A Form&Input Input ⾒
Copyright© M&A Form&Input
Copyright© M&A Form&Input ⾒ input type password
Copyright© M&A Form&Input
Copyright© M&A Form&Input
Copyright© M&A Form&Input
Copyright© M&A
Copyright© M&A Blade Components JS TailwindCSS ⾒ CSS props React
Vue FW Alpine.js HTML
Copyright© M&A Thanks for watching this :)