Tweet
Tweet

Slide 1

Slide 1 text

Copyright© M&A LaravelͱTailwindCSSͰ࢝ΊΔ ίϯϙʔωϯτࢦ޲UI PHPConference 2021 @ Kenjiro Kubota

Slide 2

Slide 2 text

Copyright© M&A Profile kubotak-is kubotak_public kenjiro.kubota M&A (Java|Type)Script PHP https://kubotak.page

Slide 3

Slide 3 text

Copyright© M&A Laravel.Shibuya Laravel PHP IRT oVice 10/20 https://laravel-shibuya.connpass.com/event/ 226 296 /

Slide 4

Slide 4 text

Copyright© M&A Blade Components TailwindCSS

Slide 5

Slide 5 text

Copyright© M&A input a button AtomicDesign Atoms

Slide 6

Slide 6 text

Copyright© M&A CSS CSS CSS 1

Slide 7

Slide 7 text

Copyright© M&A CSS SOLID

Slide 8

Slide 8 text

Copyright© M&A Index Blade Blade Components TailwindCSS Laravel TailwindCSS Blade Components UI

Slide 9

Slide 9 text

Copyright© M&A Blade

Slide 10

Slide 10 text

Copyright© M&A Blade Blade Laravel .blade.php PHP resources/views storage/framework/views

Slide 11

Slide 11 text

Copyright© M&A Blade Blade

Slide 12

Slide 12 text

Copyright© M&A Blade Blade @ Blade

Slide 13

Slide 13 text

Copyright© M&A Blade Blade @include

Slide 14

Slide 14 text

Copyright© M&A Blade Blade @yield

Slide 15

Slide 15 text

Copyright© M&A Blade Blade

Slide 16

Slide 16 text

Copyright© M&A Blade Blade @extends

Slide 17

Slide 17 text

Copyright© M&A Blade Blade @section yield

Slide 18

Slide 18 text

Copyright© M&A Blade Components

Slide 19

Slide 19 text

Copyright© M&A Blade Components Blade Components Blade Laravel 5.4 5.6 7.x 7.x

Slide 20

Slide 20 text

Copyright© M&A Blade Components Blade Components 2 Artisan

Slide 21

Slide 21 text

Copyright© M&A Artisan app/View/Components/Alert.php resources/views/components/alert.blade.php blade

Slide 22

Slide 22 text

Copyright© M&A app/View/Components/Alert.php

Slide 23

Slide 23 text

Copyright© M&A resources/views/components/alert.blade.php

Slide 24

Slide 24 text

Copyright© M&A resources/views/components/alert.blade.php

Slide 25

Slide 25 text

Copyright© M&A Components x-

Slide 26

Slide 26 text

Copyright© M&A Components x- components ⾒ ) components/alert/success.blade.php =>

Slide 27

Slide 27 text

Copyright© M&A Props

Slide 28

Slide 28 text

Copyright© M&A Props Props ⾒ :type= $hoge

Slide 29

Slide 29 text

Copyright© M&A Props Props

Slide 30

Slide 30 text

Copyright© M&A Props public

Slide 31

Slide 31 text

Copyright© M&A resources/views/components Blade resources/views/components/button.blade.php

Slide 32

Slide 32 text

Copyright© M&A props

Slide 33

Slide 33 text

Copyright© M&A props props ⾒

Slide 34

Slide 34 text

Copyright© M&A props props

Slide 35

Slide 35 text

Copyright© M&A slot $slot

Slide 36

Slide 36 text

Copyright© M&A slot extends slot @extends @slot

Slide 37

Slide 37 text

Copyright© M&A Named slot 築 Slot Slot

Slide 38

Slide 38 text

Copyright© M&A Named slot 築 Slot Slot

Slide 39

Slide 39 text

Copyright© M&A BladeComponents Vue.js SFC(Single File Component) PhpStorm Laravel Laravel Idea VSC

Slide 40

Slide 40 text

Copyright© M&A TailwindCSS

Slide 41

Slide 41 text

Copyright© M&A TailwindCSS TailwindCSS Utility First CSS Utility First .button witdh margin CSS .w- 0 .m- 0

Slide 42

Slide 42 text

Copyright© M&A TailwindCSS CSS CSS TailwindCSS HTML

Slide 43

Slide 43 text

Copyright© M&A

Slide 44

Slide 44 text

Copyright© M&A TailwindCSS Pros/Cons Pros CSS CSS (SMACSS,BEM,etc) CSS Cons CSS TailwindCSS Chrome dev tool CSS

Slide 45

Slide 45 text

Copyright© M&A TailwindCSS TailwindCSS CSS HTML JavaScript React Vue HTML HTML CSS

Slide 46

Slide 46 text

Copyright© M&A Laravel TailwindCSS

Slide 47

Slide 47 text

Copyright© M&A Laravel TailwindCSS npm tailwindcss init tailwind.config.js

Slide 48

Slide 48 text

Copyright© M&A Laravel TailwindCSS tailwind.config.js purge CSS

Slide 49

Slide 49 text

Copyright© M&A Laravel TailwindCSS resources/css/app.css tailwindcss webpack.mix.js

Slide 50

Slide 50 text

Copyright© M&A Laravel TailwindCSS HTML CSS OK

Slide 51

Slide 51 text

Copyright© M&A Blade Components UI

Slide 52

Slide 52 text

Copyright© M&A Button

Slide 53

Slide 53 text

Copyright© M&A Button props

Slide 54

Slide 54 text

Copyright© M&A Button

Slide 55

Slide 55 text

Copyright© M&A Button

Slide 56

Slide 56 text

Copyright© M&A Button stylesProps

Slide 57

Slide 57 text

Copyright© M&A Button

Slide 58

Slide 58 text

Copyright© M&A Button stylesProps

Slide 59

Slide 59 text

Copyright© M&A Button props

Slide 60

Slide 60 text

Copyright© M&A Form&Input Input

Slide 61

Slide 61 text

Copyright© M&A Form&Input Input type text

Slide 62

Slide 62 text

Copyright© M&A Form&Input Input placeholder ⾒

Slide 63

Slide 63 text

Copyright© M&A Form&Input Input ⾒

Slide 64

Slide 64 text

Copyright© M&A Form&Input

Slide 65

Slide 65 text

Copyright© M&A Form&Input ⾒ input type password

Slide 66

Slide 66 text

Copyright© M&A Form&Input

Slide 67

Slide 67 text

Copyright© M&A Form&Input

Slide 68

Slide 68 text

Copyright© M&A Form&Input

Slide 69

Slide 69 text

Copyright© M&A

Slide 70

Slide 70 text

Copyright© M&A Blade Components JS TailwindCSS ⾒ CSS props React Vue FW Alpine.js HTML

Slide 71

Slide 71 text

Copyright© M&A Thanks for watching this :)