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

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

Avatar for kubotak kubotak
October 02, 2021
Programming
3
2k

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

Other Decks in Programming

See All in Programming
Jetpack XR SDKから紐解くAndroid XR開発と技術選定のヒント / about-androidxr-and-jetpack-xr-sdk
Avatar for にー兄さん drumath2237
1
220
[AtCoder Conference 2025] LLMを使った業務AHCの上⼿な解き⽅
Avatar for terry-u16 terryu16
6
950
perlをWebAssembly上で動かすと何が嬉しいの？？？ / Where does Perl-on-Wasm actually make sense?
Avatar for mackee mackee
0
240
Java 25, Nuevas características
Avatar for Carlos Zela Bueno czelabueno
0
120
実は歴史的なアップデートだと思う AWS Interconnect - multicloud
Avatar for maroon1st maroon1st
0
280
公共交通オープンデータ × モバイルUX 複雑な運行情報を 『直感』に変換する技術
Avatar for Tsubasa SEKIGUCHI tinykitten
PRO
0
170
チームをチームにするEM
Avatar for hitode909 hitode909
0
420
フルサイクルエンジニアリングをAI Agentで全自動化したい 〜構想と現在地〜
Avatar for Kaito Minatoya kamina_zzz
0
320
Cap'n Webについて
Avatar for Yusuke Wada yusukebe
0
160
LLMで複雑な検索条件アセットから脱却する！！ 生成的検索インタフェースの設計論
Avatar for po3rin po3rin
4
1k
SwiftUIで本格音ゲー実装してみた
Avatar for 蛋白（たんぱく・TANPACT） hypebeans
0
530
リリース時」テストから「デイリー実行」へ！開発マネージャが取り組んだ、レガシー自動テストのモダン化戦略
Avatar for goataka (GOAMI Takaaki) goataka
0
150

Featured

See All Featured
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
1
1.5k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
30
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
1.9k
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
1
1.4k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
320
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
9
35k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
51k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
273
21k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.3k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k

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