Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
LaravelとTailwindCSSで始めるコンポーネント指向UI
kubotak
October 02, 2021
Programming
3
800
LaravelとTailwindCSSで始めるコンポーネント指向UI
PHP Conference Japan 2021
2021/10/02 17:35〜 Track4 Regular session (25 mins)
kubotak
October 02, 2021
Tweet
Share
More Decks by kubotak
See All by kubotak
Felteで作る簡単フォームバリデーション
kubotak
1
160
SvelteKitを本番投入してみて
kubotak
0
550
PlaywrightによるSvelteコンポーネントテスト
kubotak
0
1.1k
AWS CDKでまるっと インフラ環境をIaCしたぞ!
kubotak
0
80
FeatureToggle戦略と運用方法
kubotak
3
790
SvelteKitでストアのハイドレーションを考えてみた
kubotak
2
100
PHPコードを消すライブラリを作った
kubotak
0
1.1k
なぜLaravel9はLTSではないのか
kubotak
0
950
Nuxt v2からv3へのマイグレーション
kubotak
0
540
Other Decks in Programming
See All in Programming
Cloudflare Workersと状態管理
chimame
3
490
コンピュータビジョンセミナー2 / computer_vision_seminar_libSGM
fixstars
0
320
Hasura の Relationship と権限管理
karszawa
0
180
Unity+C#で学ぶ! メモリレイアウトとvtableのすゝめ 〜動的ポリモーフィズムを実現する仕組み〜
rossam
1
320
PHP でガチの電卓を作る
memory1994
PRO
2
150
PHPアプリケーションにおけるアーキテクチャメトリクスについて / Architecture Metrics in PHP Applications
isanasan
1
280
[2023년 1월 세미나] 데이터 분석가 되면 어떤 일을 하나요?
datarian
0
610
Listかもしれない
irof
1
280
Gradle build: The time is now
nonews
1
490
和暦を正しく扱うための暦の話
nagise
10
6.6k
データドリブンな組織の不正検知
fkubota
0
290
Excelの助けを借りて楽にシナリオを作ろう
rpa_niiyama
0
330
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
87
12k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
227
16k
Raft: Consensus for Rubyists
vanstee
130
5.7k
BBQ
matthewcrist
75
8.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
10
1.3k
Building a Modern Day E-commerce SEO Strategy
aleyda
6
4.5k
Agile that works and the tools we love
rasmusluckow
320
20k
Optimizing for Happiness
mojombo
365
64k
Adopting Sorbet at Scale
ufuk
65
7.8k
Ruby is Unlike a Banana
tanoku
93
9.5k
The Mythical Team-Month
searls
210
40k
Building an army of robots
kneath
301
40k
Transcript
Copyright© M&A LaravelͱTailwindCSSͰ࢝ΊΔ ίϯϙʔωϯτࢦUI PHPConference 2021 @ Kenjiro Kubota
Copyright© M&A Profile kubotak-is kubotak_public kenjiro.kubota M&A (Java|Type)Script PHP https://kubotak.page
Copyright© M&A Laravel.Shibuya Laravel PHP IRT oVice 10/20 https://laravel-shibuya.connpass.com/event/ 226
296 /
Copyright© M&A Blade Components TailwindCSS
Copyright© M&A input a button AtomicDesign Atoms
Copyright© M&A CSS CSS CSS 1
Copyright© M&A CSS SOLID
Copyright© M&A Index Blade Blade Components TailwindCSS Laravel TailwindCSS Blade
Components UI
Copyright© M&A Blade
Copyright© M&A Blade Blade Laravel .blade.php PHP resources/views storage/framework/views
Copyright© M&A Blade Blade
Copyright© M&A Blade Blade @ Blade
Copyright© M&A Blade Blade @include
Copyright© M&A Blade Blade @yield
Copyright© M&A Blade Blade
Copyright© M&A Blade Blade @extends
Copyright© M&A Blade Blade @section yield
Copyright© M&A Blade Components
Copyright© M&A Blade Components Blade Components Blade Laravel 5.4 5.6
7.x 7.x
Copyright© M&A Blade Components Blade Components 2 Artisan
Copyright© M&A Artisan app/View/Components/Alert.php resources/views/components/alert.blade.php blade
Copyright© M&A app/View/Components/Alert.php
Copyright© M&A resources/views/components/alert.blade.php
Copyright© M&A resources/views/components/alert.blade.php
Copyright© M&A Components x-
Copyright© M&A Components x- components ⾒ ) components/alert/success.blade.php => <x-alert.success>
Copyright© M&A Props
Copyright© M&A Props Props ⾒ :type= $hoge
Copyright© M&A Props Props
Copyright© M&A Props public
Copyright© M&A resources/views/components Blade resources/views/components/button.blade.php <x-button></x-button>
Copyright© M&A props
Copyright© M&A props props ⾒
Copyright© M&A props props
Copyright© M&A slot $slot
Copyright© M&A slot extends slot @extends @slot
Copyright© M&A Named slot 築 Slot Slot
Copyright© M&A Named slot 築 Slot Slot
Copyright© M&A BladeComponents Vue.js SFC(Single File Component) PhpStorm Laravel Laravel
Idea VSC
Copyright© M&A TailwindCSS
Copyright© M&A TailwindCSS TailwindCSS Utility First CSS Utility First .button
witdh margin CSS .w- 0 .m- 0
Copyright© M&A TailwindCSS CSS CSS TailwindCSS HTML
Copyright© M&A
Copyright© M&A TailwindCSS Pros/Cons Pros CSS CSS (SMACSS,BEM,etc) CSS Cons
CSS TailwindCSS Chrome dev tool CSS
Copyright© M&A TailwindCSS TailwindCSS CSS HTML JavaScript React Vue HTML
HTML CSS
Copyright© M&A Laravel TailwindCSS
Copyright© M&A Laravel TailwindCSS npm tailwindcss init tailwind.config.js
Copyright© M&A Laravel TailwindCSS tailwind.config.js purge CSS
Copyright© M&A Laravel TailwindCSS resources/css/app.css tailwindcss webpack.mix.js
Copyright© M&A Laravel TailwindCSS HTML CSS OK
Copyright© M&A Blade Components UI
Copyright© M&A Button
Copyright© M&A Button props
Copyright© M&A Button
Copyright© M&A Button
Copyright© M&A Button stylesProps
Copyright© M&A Button
Copyright© M&A Button stylesProps
Copyright© M&A Button props
Copyright© M&A Form&Input Input
Copyright© M&A Form&Input Input type text
Copyright© M&A Form&Input Input placeholder ⾒
Copyright© M&A Form&Input Input ⾒
Copyright© M&A Form&Input
Copyright© M&A Form&Input ⾒ input type password
Copyright© M&A Form&Input
Copyright© M&A Form&Input
Copyright© M&A Form&Input
Copyright© M&A
Copyright© M&A Blade Components JS TailwindCSS ⾒ CSS props React
Vue FW Alpine.js HTML
Copyright© M&A Thanks for watching this :)