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
2k
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
760
情報漏洩させないための設計
kubotak
6
2.4k
Svelteコンポーネントの依存関係に秩序を〜
kubotak
0
170
DMARCレポート可視化ツールを SvelteKitで作った話
kubotak
2
580
Superforms本番投入で分かった良さとハマりどころ
kubotak
0
970
Storybookを書くだけでリグレッションテストが 実行される世界へようこそ
kubotak
31
11k
(うまくいった||いかなかった) 技術選定は何を考えていたか
kubotak
1
1.3k
ウォーターフォールに思えたプロジェクトにあったアジャイルの要素
kubotak
2
850
Felteで作る簡単フォームバリデーション
kubotak
1
1.7k
Other Decks in Programming
See All in Programming
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
360
Leading Effective Engineering Teams in the AI Era
addyosmani
7
640
品質ワークショップをやってみた
nealle
0
640
Ktorで簡単AIアプリケーション
tsukakei
0
110
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
510
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
360
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
2
820
Devvox Belgium - Agentic AI Patterns
kdubois
1
150
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
940
Six and a half ridiculous things to do with Quarkus
hollycummins
0
220
Pythonに漸進的に型をつける
nealle
1
130
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
450
Featured
See All Featured
BBQ
matthewcrist
89
9.9k
Product Roadmaps are Hard
iamctodd
PRO
55
11k
Building an army of robots
kneath
305
46k
Writing Fast Ruby
sferik
630
62k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Rails Girls Zürich Keynote
gr2m
95
14k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
640
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
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 :)