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

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

Avatar for kubotak 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)

Avatar for kubotak

kubotak

October 02, 2021
Tweet

More Decks by kubotak

See All by kubotak
PHPでWebSocketサーバーを実装しよう2025
Avatar for kubotak kubotak
0
420
情報漏洩させないための設計
Avatar for kubotak kubotak
7
2.3k
Svelteコンポーネントの依存関係に秩序を〜
Avatar for kubotak kubotak
0
160
DMARCレポート可視化ツールを SvelteKitで作った話
Avatar for kubotak kubotak
2
560
Superforms本番投入で分かった良さとハマりどころ
Avatar for kubotak kubotak
0
940
Storybookを書くだけでリグレッションテストが 実行される世界へようこそ
Avatar for kubotak kubotak
31
11k
(うまくいった||いかなかった) 技術選定は何を考えていたか
Avatar for kubotak kubotak
1
1.3k
ウォーターフォールに思えたプロジェクトにあったアジャイルの要素
Avatar for kubotak kubotak
2
810
Felteで作る簡単フォームバリデーション
Avatar for kubotak kubotak
1
1.7k

Other Decks in Programming

See All in Programming
バイブコーディング × 設計思考
Avatar for nogu nogu66
0
120
20250808_AIAgent勉強会_ClaudeCodeデータ分析の実運用〜競馬を題材に回収率100%の先を目指すメソッドとは〜
Avatar for Kakeru Sato kkakeru
0
180
decksh - a little language for decks
Avatar for Anthony Starks ajstarks
4
21k
Google I/O Extended Incheon 2025 ~ What's new in Android development tools
Avatar for pluulove (노현석) pluu
1
290
kiroでゲームを作ってみた
Avatar for 入井 啓太 iriikeita
0
170
Understanding Ruby Grammar Through Conflicts
Avatar for yui-knk yui_knk
1
110
State of CSS 2025
Avatar for Benjamin Kott benjaminkott
1
110
CEDEC2025 長期運営ゲームをあと10年続けるための0から始める自動テスト ~4000項目を50%自動化し、月1→毎日実行にした3年間~
Avatar for アカツキゲームス_Tech akatsukigames_tech
0
140
あなたとJIT, 今すぐアセンブ ル
Avatar for monochrome sisshiki1969
1
690
マイコンでもRustのtestがしたい その２/KernelVM Tokyo 18
Avatar for Toshifumi NISHINAGA tnishinaga
2
2.3k
バイブコーディングの正体——AIエージェントはソフトウェア開発を変えるか？
Avatar for Shinichi Takayanagi stakaya
5
950
あまり知られていない MCP 仕様たち / MCP specifications that aren’t widely known
Avatar for ktr ktr_0731
0
280

Featured

See All Featured
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
301
21k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.7k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
58
9.5k
Docker and Python
Avatar for Tania Allard trallard
45
3.5k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
73
5k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
332
24k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
560
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
30
9.6k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
53
7.7k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
251
21k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
367
19k

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 :)