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

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

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