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
620
情報漏洩させないための設計
kubotak
6
2.4k
Svelteコンポーネントの依存関係に秩序を〜
kubotak
0
160
DMARCレポート可視化ツールを SvelteKitで作った話
kubotak
2
570
Superforms本番投入で分かった良さとハマりどころ
kubotak
0
960
Storybookを書くだけでリグレッションテストが 実行される世界へようこそ
kubotak
31
11k
(うまくいった||いかなかった) 技術選定は何を考えていたか
kubotak
1
1.3k
ウォーターフォールに思えたプロジェクトにあったアジャイルの要素
kubotak
2
840
Felteで作る簡単フォームバリデーション
kubotak
1
1.7k
Other Decks in Programming
See All in Programming
フロントエンド開発に役立つクライアントプログラム共通のノウハウ / Universal client-side programming best practices for frontend development
nrslib
7
3.9k
複雑化したリポジトリをなんとかした話 pipenvからuvによるモノレポ構成への移行
satoshi256kbyte
1
770
CSC305 Lecture 04
javiergs
PRO
0
250
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
920
Back to the Future: Let me tell you about the ACP protocol
terhechte
0
130
明日から始めるリファクタリング
ryounasso
0
110
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
390
株式会社 Sun terras カンパニーデック
sunterras
0
230
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
600
私はどうやって技術力を上げたのか
yusukebe
43
17k
止められない医療アプリ、そっと Swift 6 へ
medley
1
120
ABEMAモバイルアプリが Kotlin Multiplatformと歩んだ5年 ─ 導入と運用、成功と課題 / iOSDC 2025
akkyie
0
320
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Six Lessons from altMBA
skipperchong
28
4k
Unsuck your backbone
ammeep
671
58k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Statistics for Hackers
jakevdp
799
220k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
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 :)