Upgrade to Pro — share decks privately, control downloads, hide ads and more …

LaravelとTailwindCSSで始めるコンポーネント指向UI

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for kubotak kubotak
October 02, 2021
Programming
2.1k
3

 LaravelとTailwindCSSで始めるコンポーネント指向UI

PHP Conference Japan 2021
2021/10/02 17:35〜 Track4 Regular session (25 mins)

Avatar for kubotak

kubotak

October 02, 2021

More Decks by kubotak

See All by kubotak
ハーネスエンジニアリング白書
Avatar for kubotak kubotak
0
27
Laravelにはdeleted_atがありますけど？
Avatar for kubotak kubotak
2
85
PHPでWebSocketサーバーを実装しよう2025
Avatar for kubotak kubotak
0
1.9k
情報漏洩させないための設計
Avatar for kubotak kubotak
6
3k
Svelteコンポーネントの依存関係に秩序を〜
Avatar for kubotak kubotak
0
220
DMARCレポート可視化ツールを SvelteKitで作った話
Avatar for kubotak kubotak
2
650
Superforms本番投入で分かった良さとハマりどころ
Avatar for kubotak kubotak
0
1.1k
Storybookを書くだけでリグレッションテストが 実行される世界へようこそ
Avatar for kubotak kubotak
31
11k
(うまくいった||いかなかった) 技術選定は何を考えていたか
Avatar for kubotak kubotak
1
1.5k

Other Decks in Programming

See All in Programming
Kubernetesを使わない環境にもCloud Nativeなデプロイを実現する / Enabling Cloud Native deployments without the complexity of Kubernetes
Avatar for linyows linyows
3
330
tRPCの概要と少しだけパフォーマンス
Avatar for Keigo Ebihara misoton665
2
270
Back to the roots of date
Avatar for jinroq jinroq
0
740
ふにゃっとしない名前の付け方 〜哲学で茹で上げる、コシのあるソフトウェア設計〜
Avatar for akshimo shimomura
0
110
【26新卒研修】OpenAPI/Swagger REST API研修
Avatar for ディップ株式会社 dip_tech
PRO
0
140
クラウドネイティブなエンジニアに向ける Raycastの魅力と実際の活用事例
Avatar for Nealle nealle
2
250
Surviving Black Friday: 329 billion requests with Falcon!
Avatar for Samuel Williams ioquatix
0
2.9k
サプライチェーン攻撃対策「層を重ねて落ちない壁」を10日間で組み上げた話 #TechLeadConf2026
Avatar for Kashun Yoshida kashewnuts
1
230
サークル参加から学ぶ、小さな事業の回し方
Avatar for yuzneri yuzneri
0
150
PHPでローカル環境用のSSL/TLS証明書を発行することはできるのか？ #phpconkagawa
Avatar for akase244 akase244
0
350
Are We Really Coding 10× Faster with AI?
Avatar for Koichi Yoshida kohzas
0
130
When benchmarks go bad - what I learned from measuring performance wrong
Avatar for Holly Cummins hollycummins
0
370

Featured

See All Featured
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
30k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.5k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
1
360
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
110
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.8k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
55
12k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
66
8.4k
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.2k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
1
370
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
1
2.6k

Transcript

  1. Copyright© M&A LaravelͱTailwindCSSͰ࢝ΊΔ ίϯϙʔωϯτࢦ޲UI PHPConference 2021 @ Kenjiro Kubota

  2. Copyright© M&A Profile kubotak-is kubotak_public kenjiro.kubota M&A (Java|Type)Script PHP https://kubotak.page

  3. Copyright© M&A Laravel.Shibuya Laravel PHP IRT oVice 10/20 https://laravel-shibuya.connpass.com/event/ 226

    296 /

  4. Copyright© M&A Blade Components TailwindCSS

  5. Copyright© M&A input a button AtomicDesign Atoms

  6. Copyright© M&A CSS CSS CSS 1

  7. Copyright© M&A CSS SOLID

  8. Copyright© M&A Index Blade Blade Components TailwindCSS Laravel TailwindCSS Blade

    Components UI

  9. Copyright© M&A Blade

  10. Copyright© M&A Blade Blade Laravel .blade.php PHP resources/views storage/framework/views

  11. Copyright© M&A Blade Blade

  12. Copyright© M&A Blade Blade @ Blade

  13. Copyright© M&A Blade Blade @include

  14. Copyright© M&A Blade Blade @yield

  15. Copyright© M&A Blade Blade

  16. Copyright© M&A Blade Blade @extends

  17. Copyright© M&A Blade Blade @section yield

  18. Copyright© M&A Blade Components

  19. Copyright© M&A Blade Components Blade Components Blade Laravel 5.4 5.6

    7.x 7.x

  20. Copyright© M&A Blade Components Blade Components 2 Artisan

  21. Copyright© M&A Artisan app/View/Components/Alert.php resources/views/components/alert.blade.php blade

  22. Copyright© M&A app/View/Components/Alert.php

  23. Copyright© M&A resources/views/components/alert.blade.php

  24. Copyright© M&A resources/views/components/alert.blade.php

  25. Copyright© M&A Components x-

  26. Copyright© M&A Components x- components ⾒ ) components/alert/success.blade.php => <x-alert.success>

  27. Copyright© M&A Props

  28. Copyright© M&A Props Props ⾒ :type= $hoge

  29. Copyright© M&A Props Props

  30. Copyright© M&A Props public

  31. Copyright© M&A resources/views/components Blade resources/views/components/button.blade.php <x-button></x-button>

  32. Copyright© M&A props

  33. Copyright© M&A props props ⾒

  34. Copyright© M&A props props

  35. Copyright© M&A slot $slot

  36. Copyright© M&A slot extends slot @extends @slot

  37. Copyright© M&A Named slot 築 Slot Slot

  38. Copyright© M&A Named slot 築 Slot Slot

  39. Copyright© M&A BladeComponents Vue.js SFC(Single File Component) PhpStorm Laravel Laravel

    Idea VSC

  40. Copyright© M&A TailwindCSS

  41. Copyright© M&A TailwindCSS TailwindCSS Utility First CSS Utility First .button

    witdh margin CSS .w- 0 .m- 0

  42. Copyright© M&A TailwindCSS CSS CSS TailwindCSS HTML

  43. Copyright© M&A

  44. Copyright© M&A TailwindCSS Pros/Cons Pros CSS CSS (SMACSS,BEM,etc) CSS Cons

    CSS TailwindCSS Chrome dev tool CSS

  45. Copyright© M&A TailwindCSS TailwindCSS CSS HTML JavaScript React Vue HTML

    HTML CSS

  46. Copyright© M&A Laravel TailwindCSS

  47. Copyright© M&A Laravel TailwindCSS npm tailwindcss init tailwind.config.js

  48. Copyright© M&A Laravel TailwindCSS tailwind.config.js purge CSS

  49. Copyright© M&A Laravel TailwindCSS resources/css/app.css tailwindcss webpack.mix.js

  50. Copyright© M&A Laravel TailwindCSS HTML CSS OK

  51. Copyright© M&A Blade Components UI

  52. Copyright© M&A Button

  53. Copyright© M&A Button props

  54. Copyright© M&A Button

  55. Copyright© M&A Button

  56. Copyright© M&A Button stylesProps

  57. Copyright© M&A Button

  58. Copyright© M&A Button stylesProps

  59. Copyright© M&A Button props

  60. Copyright© M&A Form&Input Input

  61. Copyright© M&A Form&Input Input type text

  62. Copyright© M&A Form&Input Input placeholder ⾒

  63. Copyright© M&A Form&Input Input ⾒

  64. Copyright© M&A Form&Input

  65. Copyright© M&A Form&Input ⾒ input type password

  66. Copyright© M&A Form&Input

  67. Copyright© M&A Form&Input

  68. Copyright© M&A Form&Input

  69. Copyright© M&A

  70. Copyright© M&A Blade Components JS TailwindCSS ⾒ CSS props React

    Vue FW Alpine.js HTML

  71. Copyright© M&A Thanks for watching this :)