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

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

1851e42555822b0fc915dbf3ef0c0f76?s=47 kubotak
October 02, 2021
Programming
3
550

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

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

1851e42555822b0fc915dbf3ef0c0f76?s=128

kubotak

October 02, 2021
Tweet

More Decks by kubotak

See All by kubotak
SvelteKitでストアのハイドレーションを考えてみた
1851e42555822b0fc915dbf3ef0c0f76?s=48 kubotak
2
21
PHPコードを消すライブラリを作った
1851e42555822b0fc915dbf3ef0c0f76?s=48 kubotak
0
780
なぜLaravel9はLTSではないのか
1851e42555822b0fc915dbf3ef0c0f76?s=48 kubotak
0
660
Nuxt v2からv3へのマイグレーション
1851e42555822b0fc915dbf3ef0c0f76?s=48 kubotak
0
330
カンファレンスで登壇すること
1851e42555822b0fc915dbf3ef0c0f76?s=48 kubotak
0
47
ある日突然、Laravel Queue Workerが壊れた
1851e42555822b0fc915dbf3ef0c0f76?s=48 kubotak
1
280
SSGなサイトでOGP画像を動的生成したい
1851e42555822b0fc915dbf3ef0c0f76?s=48 kubotak
1
1.2k
Laravelで運用しているサービスを Nuxt.jsにリプレイスする
1851e42555822b0fc915dbf3ef0c0f76?s=48 kubotak
6
2.1k
Nuxt.jsでCompositionAPIを使う
1851e42555822b0fc915dbf3ef0c0f76?s=48 kubotak
1
670

Other Decks in Programming

See All in Programming
このタイミングで知っておきたい 開発生産性の高いエンジニア組織の特徴とは / dev-sumi-20220721-productivity-features
6f425ca5b796b421dca359b95046184f?s=48 findyinc
7
2.7k
Recap CDN, Edge, WebAssembly | ワインと鍋.js#1
33ef4c1ebe619115b552db9a9f9a3509?s=48 sadnessojisan
2
1.2k
Regular expressions basics/正規表現の基本
9bf923e39671cde83584e3e926296c13?s=48 kishikawakatsumi
6
270
Agile Tech EXPO_2022／カケハシ
79d1f8ec70d4c77a2eb30052bef0fe35?s=48 kakehashi
0
120
回帰分析ではlm()ではなくestimatr::lm_robust()を使おう / TokyoR100
7a0892afffbcbd35fd84d46508b3a914?s=48 dropout009
0
4.6k
サーバーレスパターンから学ぶデータ分析基盤構築 / devio2022
82d6167c4d14393c2e20b37a74b363c5?s=48 kasacchiful
0
520
FullStack eXchange, July 2022
6f3ec7315ad0715ae2a5f89a52877218?s=48 brucel
0
200
設計の考え方とやり方
8f84b7d8869ef6005d89b378e8661f7c?s=48 masuda220
PRO
56
32k
Git操作編
A3efba75cfbb0b7d5248eb74d1d29d79?s=48 smt7174
2
260
ZOZOTOWNにおけるDatadogの活用と、それを支える全社管理者の取り組み / 2022-07-27
198d69383210fbec8c6bea4a35863c9d?s=48 tippy
1
3.6k
YATA: collaborative documents and how to make them fast
009174d68aa95ae39054afa749013f78?s=48 horusiath
1
170
FutureCon 2022 FlutterアプリのPerformance測定
4affdb6a9878e509da7ca41a87051352?s=48 harukafujita
0
140

Featured

See All Featured
Code Review Best Practice
3d6ace9554821d552146413bcdf874f6?s=48 trishagee
44
9.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Fd55de4174accaf3b4f030e43a8a70c6?s=48 marcduiker
6
580
StorybookのUI Testing Handbookを読んだ
50fc0fdc2327ecbe7350645812de52e3?s=48 zakiyama
6
2.5k
Making Projects Easy
C4de88ea47538e4594750e3861a341c8?s=48 brettharned
99
4.4k
Web Components: a chance to create the future
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
303
40k
Ruby is Unlike a Banana
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
91
9.3k
Facilitating Awesome Meetings
245cee81a9c424266e5e401d844ea881?s=48 lara
29
4.1k
From Idea to $5000 a Month in 5 Months
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
373
44k
What's in a price? How to price your products and services
Dad095ea7038f89f760419ce475d5d14?s=48 michaelherold
229
9.4k
Reflections from 52 weeks, 52 projects
E43f8dfd01057f8304f5f8fb9a294d7d?s=48 jeffersonlam
337
17k
CSS Pre-Processors: Stylus, Less & Sass
7559f6cff1f5efc2d210965febd4d71c?s=48 bermonpainter
349
27k
Fight the Zombie Pattern Library - RWD Summit 2016
9fa239b3154a0169d99ab7bf1422dd12?s=48 marcelosomers
226
15k

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