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

Other Decks in Programming

See All in Programming
フロントエンド開発に役立つクライアントプログラム共通のノウハウ / Universal client-side programming best practices for frontend development
Avatar for nrs nrslib
7
3.9k
複雑化したリポジトリをなんとかした話　pipenvからuvによるモノレポ構成への移行
Avatar for Satoshi Kaneyasu satoshi256kbyte
1
770
CSC305 Lecture 04
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
250
uniqueパッケージの内部実装を支えるweak pointerの話
Avatar for magavel magavel
0
920
Back to the Future: Let me tell you about the ACP protocol
Avatar for Benedikt Terhechte terhechte
0
130
明日から始めるリファクタリング
Avatar for ryounasso ryounasso
0
110
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう！ #FEC余熱NIGHT
Avatar for Masayuki Izumi izumin5210
3
390
株式会社 Sun terras カンパニーデック
Avatar for Sun terras.Inc sunterras
0
230
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
Avatar for imkaoru imkaoru
4
600
私はどうやって技術力を上げたのか
Avatar for Yusuke Wada yusukebe
43
17k
止められない医療アプリ、そっと Swift 6 へ
Avatar for MEDLEY, INC. medley
1
120
ABEMAモバイルアプリが
Kotlin Multiplatformと歩んだ5年 ─ 導入と運用、成功と課題 / iOSDC 2025
Avatar for Akio Yasui akkyie
0
320

Featured

See All Featured
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.2k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
1.6k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
4k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
54
3k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.2k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
51k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
73
11k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
514
110k

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