Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for kubotak kubotak
October 02, 2021
Programming
2.2k
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
SaaS is Dead — 自作アプリで見えたSaaSの死
Avatar for kubotak kubotak
0
16
僕も、PHPフレームワーク作ってみた
Avatar for kubotak kubotak
0
310
ハーネスエンジニアリング白書
Avatar for kubotak kubotak
0
180
Laravelにはdeleted_atがありますけど？
Avatar for kubotak kubotak
2
130
PHPでWebSocketサーバーを実装しよう2025
Avatar for kubotak kubotak
0
2.7k
情報漏洩させないための設計
Avatar for kubotak kubotak
6
3.3k
Svelteコンポーネントの依存関係に秩序を〜
Avatar for kubotak kubotak
0
260
DMARCレポート可視化ツールを SvelteKitで作った話
Avatar for kubotak kubotak
2
740
Superforms本番投入で分かった良さとハマりどころ
Avatar for kubotak kubotak
0
1.1k

Other Decks in Programming

See All in Programming
Zero-Tap Sign-In対応、結局何をすればいいの？
Avatar for mitohato14 mitohato14
0
1.8k
AWS CDKを理解するために公式の定義を深掘って解説してみる / Understanding AWS CDK by Digging into Its Official Definition
Avatar for アキキー | Akihisa Ikeda akihisaikeda
3
290
Snowflake Openflow Connector利用の勘所 / 20261024developersio2026tokyo-snowflake-openflow
Avatar for kasacchiful kasacchiful
PRO
0
310
SODA - FACT BOOK（JP）
Avatar for SODA inc. sodainc
1
40k
Web Framework Benchmark Battle 2026, Any%
Avatar for Akira Matsuda a_matsuda
3
3.2k
作って学ぶSpring BootのAuto Configuration / JJUG Night Seminar 2026-10-19
Avatar for Ryo Shindo rshindo
0
220
느린 네트워크와 저사양 디바이스 사용자를 위한 웹뷰 로딩 시간 개선기
Avatar for kmkim kmkim
1
210
TS 7.0 で baseUrl が使えなくなった今、パスエイリアスをどうするか
Avatar for おおいし bicstone
2
560
動画プレイヤーはなぜカクつくのか 〜Flutterのレンダリングとネイティブの境界を解剖する〜
Avatar for Naruo Yoshiki naruogram
0
330
PumaからFalconに移行したRailsアプリケーションでの実践
Avatar for Hayato OKUMOTO falcon8823
0
360
Goコンパイラを作ってGoをもっと理解する / Build a Go compiler to better understand Go
Avatar for ikura-hamu ikura_hamu
0
130
AIが生成したコードは読むべきか？抽象化設計とコードの品質保証 / abstraction-design-and-quality
Avatar for MinoDriven minodriven
16
8.8k

Featured

See All Featured
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
331
25k
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
2
980
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
56
10k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
7k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
22k
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
440
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
570
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8.4k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
529
40k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
464
34k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
2.2k
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
1
280

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