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.7k
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
Svelteコンポーネントの依存関係に秩序を〜
kubotak
0
53
DMARCレポート可視化ツールを SvelteKitで作った話
kubotak
2
420
Superforms本番投入で分かった良さとハマりどころ
kubotak
0
610
Storybookを書くだけでリグレッションテストが 実行される世界へようこそ
kubotak
31
10k
(うまくいった||いかなかった) 技術選定は何を考えていたか
kubotak
1
1.1k
ウォーターフォールに思えたプロジェクトにあったアジャイルの要素
kubotak
2
690
Felteで作る簡単フォームバリデーション
kubotak
1
1.3k
SvelteKitを本番投入してみて
kubotak
2
1.9k
PlaywrightによるSvelteコンポーネントテスト
kubotak
0
3.5k
Other Decks in Programming
See All in Programming
hotwire_or_react
harunatsujita
8
4.1k
Kotlin2でdataクラスの copyメソッドを禁止する/Data class copy function to have the same visibility as constructor
eichisanden
1
130
Synchronizationを支える技術
s_shimotori
1
150
Java ジェネリクス入門 2024
nagise
0
600
Vue.js学習の振り返り
hiro_xre
2
130
Golang と Erlang
taiyow
8
1.9k
外部システム連携先が10を超えるシステムでのアーキテクチャ設計・実装事例
kiwasaki
1
220
開発効率向上のためのリファクタリングの一歩目の選択肢 ~コード分割~ / JJUG CCC 2024 Fall
ryounasso
0
360
ECSのサービス間通信 4つの方法を比較する 〜Canary,Blue/Greenも添えて〜
tkikuc
11
2.3k
色々なIaCツールを実際に触って比較してみる
iriikeita
0
270
Outline View in SwiftUI
1024jp
1
110
cXML という電子商取引の トランザクションを支える プロトコルと向きあっている話
phigasui
3
2.3k
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
BBQ
matthewcrist
85
9.3k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Practical Orchestrator
shlominoach
186
10k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Visualization
eitanlees
144
15k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
A better future with KSS
kneath
238
17k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
Documentation Writing (for coders)
carmenintech
65
4.4k
Optimizing for Happiness
mojombo
376
69k
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 :)