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.5k
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
DMARCレポート可視化ツールを SvelteKitで作った話
kubotak
2
290
Superforms本番投入で分かった良さとハマりどころ
kubotak
0
260
Storybookを書くだけでリグレッションテストが 実行される世界へようこそ
kubotak
31
9.4k
(うまくいった||いかなかった) 技術選定は何を考えていたか
kubotak
1
810
ウォーターフォールに思えたプロジェクトにあったアジャイルの要素
kubotak
2
570
Felteで作る簡単フォームバリデーション
kubotak
1
970
SvelteKitを本番投入してみて
kubotak
2
1.6k
PlaywrightによるSvelteコンポーネントテスト
kubotak
0
3.1k
AWS CDKでまるっと インフラ環境をIaCしたぞ!
kubotak
0
320
Other Decks in Programming
See All in Programming
戦略的DDDは重いのか? / Is strategic DDD heavy?
pictiny
3
1.6k
最近コードレビューで指摘したこと
forrep
3
100
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
1.4k
Let's learn code review
riofujimon
2
630
欠陥を早期に発見するための Software Engineer in Test とその重要性 / What is Software Engineer in Test and How they works
orgachem
PRO
9
710
Effectで作る堅牢でスケーラブルなAPIゲートウェイ / Robust and Scalable API Gateway Built on Effect
yasaichi
7
1.1k
Open standards for building event-driven applications in the cloud
meteatamel
0
200
TSKaigi 2024 - 新サービス Progate Path の演習で TypeScript を採用して見えた教材観点からの利点と課題
makotoshimazu
1
200
“Seeing Like a Programmer”—Resiliency, Limits, and Moral Hazards in Software Engineering (LambdaConf 2024)
chriskrycho
0
400
一文字エイリアスのすすめ
fujimura
0
170
仕様と実装で学ぶOpenTelemetry
drumato
2
180
Kotlin Multiplatform at Stable and Beyond (Android Makers 2024)
zsmb
0
590
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
176
21k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
26
2.3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
Making the Leap to Tech Lead
cromwellryan
125
8.5k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.7k
Infographics Made Easy
chrislema
238
18k
Web Components: a chance to create the future
zenorocha
306
41k
Optimising Largest Contentful Paint
csswizardry
13
2.4k
Fireside Chat
paigeccino
22
2.7k
Visualization
eitanlees
137
14k
RailsConf 2023
tenderlove
9
580
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
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 :)