Tailwind CSS
Ένας σύγχρονος τρόπος για να (μην) γράφετε CSS
Χρυσόστομος Ζαμπετάκης
Full stack web developer | www.istogram.com
Slide 2
Slide 2 text
Tailwind CSS
Ένας τρόπος για να αγαπήσουν τη CSS
οι back-end developers
Χρυσόστομος Ζαμπετάκης
Full stack web developer | www.istogram.com
Slide 3
Slide 3 text
Ποιος είμαι
Slide 4
Slide 4 text
Ποιος είμαι
Slide 5
Slide 5 text
Ποιος είμαι
Slide 6
Slide 6 text
Ποιος είμαι
Slide 7
Slide 7 text
Τι αφορά η παρουσίαση
Slide 8
Slide 8 text
Τι αφορά η παρουσίαση
• Το custom theme development
Slide 9
Slide 9 text
Τι αφορά η παρουσίαση
• Το custom theme development
• To responsive web design
Slide 10
Slide 10 text
Τι αφορά η παρουσίαση
• Το custom theme development
• To responsive web design
• Τις σύγχρονες πρακτικές CSS
Slide 11
Slide 11 text
Τι αφορά η παρουσίαση
• Το custom theme development
• To responsive web design
• Τις σύγχρονες πρακτικές CSS
• To performance optimization
Slide 12
Slide 12 text
Τι είναι το Tailwind CSS
Slide 13
Slide 13 text
Τι είναι το Tailwind CSS
• A utility-first CSS framework for rapidly
building custom designs
(https://tailwindcss.com)
Slide 14
Slide 14 text
Τι είναι το Tailwind CSS
• A utility-first CSS framework for rapidly
building custom designs
(https://tailwindcss.com)
• Ένα CSS framework που χρησιμοποιεί
βοηθητικές κλάσεις (utility classes) για την
ταχύτατη ανάπτυξη προσαρμοσμένων
σχεδιασμών
Slide 15
Slide 15 text
Χρειαζόμαστε κι άλλο ένα CSS
framework ?
Slide 16
Slide 16 text
Χρειαζόμαστε κι άλλο ένα CSS
framework ?
• Bootstrap - https://getbootstrap.com/
Slide 17
Slide 17 text
Χρειαζόμαστε κι άλλο ένα CSS
framework ?
• Foundation - https://get.foundation/
Slide 18
Slide 18 text
Χρειαζόμαστε κι άλλο ένα CSS
framework ?
• Bulma - https://bulma.io/
Slide 19
Slide 19 text
Χρειαζόμαστε κι άλλο ένα CSS
framework ?
• UIKit - https://getuikit.com/
Slide 20
Slide 20 text
Χρειαζόμαστε κι άλλο ένα CSS
framework ?
και η λίστα συνεχίζεται…
Slide 21
Slide 21 text
Τι κοινό έχουν όλα τα παραπάνω
CSS frameworks ?
Slide 22
Slide 22 text
Τι κοινό έχουν όλα τα παραπάνω
CSS frameworks ?
• Όλα κάνουν πολύ περισσότερα απ’ όσα
χρειαζόμαστε από ένα CSS Framework
Slide 23
Slide 23 text
Τι κοινό έχουν όλα τα παραπάνω
CSS frameworks ?
• Όλα κάνουν πολύ περισσότερα απ’ όσα
χρειαζόμαστε από ένα CSS Framework
• Προσφέρουν δικά τους UI components
(buttons, modals, alerts, navigation menus)
που απαιτούν προσπάθεια για να αλλάξουν,
σύμφωνα με τον επιθυμητό σχεδιασμό
Slide 24
Slide 24 text
Τι κοινό έχουν όλα τα παραπάνω
CSS frameworks ?
• Όλα κάνουν πολύ περισσότερα απ’ όσα
χρειαζόμαστε από ένα CSS Framework
• Προσφέρουν δικά τους UI components
(buttons, modals, alerts, navigation menus)
που απαιτούν προσπάθεια για να αλλάξουν,
σύμφωνα με τον επιθυμητό σχεδιασμό
• Τα περισσότερα (αν όχι όλα) προσφέρονται
με ενσωματωμένο JS κώδικα
Slide 25
Slide 25 text
Τι θα θέλαμε από ένα CSS
framework ?
Slide 26
Slide 26 text
Τι θα θέλαμε από ένα CSS
framework ?
• Να είναι «καθαρό» CSS framework (no JS
please!)
Slide 27
Slide 27 text
Τι θα θέλαμε από ένα CSS
framework ?
• Να είναι «καθαρό» CSS framework (no JS
please!)
• Να επιτρέπει γρήγορη ανάπτυξη των
responsive designs
Slide 28
Slide 28 text
Τι θα θέλαμε από ένα CSS
framework ?
• Να είναι «καθαρό» CSS framework (no JS
please!)
• Να επιτρέπει γρήγορη ανάπτυξη των
responsive designs
• Να προσαρμόζεται πλήρως στις εκάστοτε
ανάγκες
Slide 29
Slide 29 text
Τι θα θέλαμε από ένα CSS
framework ?
• Να είναι «καθαρό» CSS framework (no JS
please!)
• Να επιτρέπει γρήγορη ανάπτυξη των
responsive designs
• Να προσαρμόζεται πλήρως στις εκάστοτε
ανάγκες
• Να είναι - όσο το δυνατόν - μικρότερο σε
μέγεθος
Slide 30
Slide 30 text
Επίσης, θα ήταν ιδανικό να
αξιοποιήσουμε :
Slide 31
Slide 31 text
Επίσης, θα ήταν ιδανικό να
αξιοποιήσουμε :
• Το flexbox!
Slide 32
Slide 32 text
Επίσης, θα ήταν ιδανικό να
αξιοποιήσουμε :
• Το flexbox! Συγκεκριμένα π.χ.
Slide 33
Slide 33 text
Επίσης, θα ήταν ιδανικό να
αξιοποιήσουμε :
• Το flexbox! Συγκεκριμένα π.χ.
Να μπορούμε γρήγορα να κάνουμε «τέλεια
κεντρική στοίχιση» (οριζοντίως & καθέτως!)
Slide 34
Slide 34 text
Επίσης, θα ήταν ιδανικό να
αξιοποιήσουμε :
• Το flexbox! Συγκεκριμένα π.χ.
Να μπορούμε γρήγορα να κάνουμε «τέλεια
κεντρική στοίχιση» (οριζοντίως & καθέτως!)
Να μπορούμε εύκολα να αλλάζουμε τον
προσανατολισμό του (σε γραμμή ή στήλη), για να
επιτευχθεί το ταχύτερο responsive web design
Slide 35
Slide 35 text
Επίσης, θα ήταν ιδανικό να
αξιοποιήσουμε :
Slide 36
Slide 36 text
Επίσης, θα ήταν ιδανικό να
αξιοποιήσουμε :
• Τη χρήση των rem units αντί των pixels
Slide 37
Slide 37 text
Επίσης, θα ήταν ιδανικό να
αξιοποιήσουμε :
• Τη χρήση των rem units αντί των pixels
html {
font-size: 16px;
}
Slide 38
Slide 38 text
Επίσης, θα ήταν ιδανικό να
αξιοποιήσουμε :
• Τη χρήση των rem units αντί των pixels
html {
font-size: 16px;
}
1rem = 16px
1.5rem = 24px
Slide 39
Slide 39 text
Επίσης, θα ήταν ιδανικό να
αξιοποιήσουμε :
• Τη χρήση των rem units αντί των pixels
Slide 40
Slide 40 text
Επίσης, θα ήταν ιδανικό να
αξιοποιήσουμε :
• Τη χρήση των rem units αντί των pixels
1 pixel = 1 pixel (στα 96 dpi)
Slide 41
Slide 41 text
Επίσης, θα ήταν ιδανικό να
αξιοποιήσουμε :
• Τη χρήση των rem units αντί των pixels
1 pixel = 1 pixel (στα 96 dpi)
1 pixel = 2 pixels (οθόνες Retina)
Slide 42
Slide 42 text
Επίσης, θα ήταν ιδανικό να
αξιοποιήσουμε :
• Τη χρήση των rem units αντί των pixels
Είναι ασφαλές;
Slide 43
Slide 43 text
Επίσης, θα ήταν ιδανικό να
αξιοποιήσουμε :
• Τη χρήση των rem units αντί των pixels
Είναι ασφαλές; Ναι! (96% των browsers την
υποστηρίζουν)
Slide 44
Slide 44 text
Επίσης, θα ήταν ιδανικό να
αξιοποιήσουμε :
• Τη χρήση των rem units αντί των pixels
Σεβασμός στις προτιμήσεις του χρήστη
Slide 45
Slide 45 text
Επίσης, θα ήταν ιδανικό να
αξιοποιήσουμε :
• Τη χρήση των rem units αντί των pixels
Σεβασμός στις προτιμήσεις του χρήστη
Αυτόματη αναπροσαρμογή, αν αλλάξουμε τη
βασική μονάδα
Slide 46
Slide 46 text
Ιδανικά, από ένα CSS framework
θα θέλαμε ακόμη :
Slide 47
Slide 47 text
Ιδανικά, από ένα CSS framework
θα θέλαμε ακόμη :
• Η ονομασία των βοηθητικών
κλάσεων να είναι διαισθητική
Slide 48
Slide 48 text
Ιδανικά, από ένα CSS framework
θα θέλαμε ακόμη :
• Η ονομασία των βοηθητικών
κλάσεων να είναι διαισθητική, για
να τις ανακαλούμε από τη μνήμη
μας ταχύτερα!
Slide 49
Slide 49 text
Βασικά στοιχεία του Tailwind CSS
Slide 50
Slide 50 text
Βασικά στοιχεία του Tailwind CSS
• Προκαθορισμένη κλίμακα διαστημάτων
Slide 51
Slide 51 text
Βασικά στοιχεία του Tailwind CSS
• Προκαθορισμένη κλίμακα διαστημάτων
Βασική μονάδα μέτρησης διαστήματος = 0.25 rem ( 4px )
Βασικά στοιχεία του Tailwind CSS
• Η χρωματική παλέτα
Slide 59
Slide 59 text
Βασικά στοιχεία του Tailwind CSS
• Η χρωματική παλέτα
tailwind.config.js
colors = {
. . .
'premium-green-light': '#1B827C',
. . .
}
Slide 60
Slide 60 text
Βασικά στοιχεία του Tailwind CSS
• Τα χρώματα γίνονται διαθέσιμα για το κείμενο (text), το φόντο
(background) και το σύνορο (border).
Slide 61
Slide 61 text
Βασικά στοιχεία του Tailwind CSS
• Τα χρώματα γίνονται διαθέσιμα για το κείμενο (text), το φόντο
(background) και το σύνορο (border).
.text-premium-green-light
.bg-premium-green-light
.border-premium-green-light
Slide 62
Slide 62 text
Τι μας προσφέρει το Tailwind CSS
Slide 63
Slide 63 text
Τι μας προσφέρει το Tailwind CSS
• Τη δυνατότητα να γράφουμε βοηθητικές κλάσεις, τις οποίες
ενσωματώνουμε στον κώδικα HTML
Slide 64
Slide 64 text
Τι μας προσφέρει το Tailwind CSS
• Τη δυνατότητα να γράφουμε βοηθητικές κλάσεις, τις οποίες
ενσωματώνουμε στον κώδικα HTML
Δείτε μας στο χάρτη
Slide 65
Slide 65 text
Τι μας προσφέρει το Tailwind CSS
• Τη δυνατότητα να γράφουμε βοηθητικές κλάσεις, τις οποίες
ενσωματώνουμε στον κώδικα HTML
Δείτε μας στο χάρτη
Slide 66
Slide 66 text
Τι μας προσφέρει το Tailwind CSS
• Τη δυνατότητα να εξάγουμε τις βοηθητικές κλάσεις, για να φτιάξουμε τα
δικά μας στοιχεία
Slide 67
Slide 67 text
Τι μας προσφέρει το Tailwind CSS
• Τη δυνατότητα να εξάγουμε τις βοηθητικές κλάσεις, για να φτιάξουμε τα
δικά μας στοιχεία
Τι μας προσφέρει το Tailwind CSS
• Τη δυνατότητα να καθορίσουμε, εύκολα, διαφορετικές βοηθητικές κλάσεις
για τα διαφορετικά states (π.χ. hover, focus, active)
Slide 69
Slide 69 text
Τι μας προσφέρει το Tailwind CSS
• Τη δυνατότητα να καθορίσουμε, εύκολα, διαφορετικές βοηθητικές κλάσεις
για τα διαφορετικά states (π.χ. hover, focus, active)
. . .
Slide 70
Slide 70 text
Τι μας προσφέρει το Tailwind CSS
• Τη δυνατότητα να καθορίσουμε, εύκολα, διαφορετικές βοηθητικές κλάσεις
για τα διαφορετικά states (π.χ. hover, focus, active)
. . .
Slide 71
Slide 71 text
Τι μας προσφέρει το Tailwind CSS
• Τη δυνατότητα να το προσαρμόσουμε, πλήρως, σύμφωνα με τις δικές μας
ανάγκες
Slide 72
Slide 72 text
Τι μας προσφέρει το Tailwind CSS
• Π.χ. να ορίσουμε τα δικά μας σημεία αλλαγής του responsive design
(breakpoints)
screens: {
'xs': ‘340px', // extra breakpoint
'sm': ‘640px',
'md': '768px',
'lg': ‘1024px',
'xl': '1280px',
},
Slide 73
Slide 73 text
Τι μας προσφέρει το Tailwind CSS
• Π.χ. να ορίσουμε τα δικά μας μεγέθη για την τυπογραφία
textSizes: {
. . .
'base': '1rem', // 16px
'lg': '1.125rem', // 18px
'xl': '1.25rem', // 20px
'1xl': '1.375rem', // 22px
},
Slide 74
Slide 74 text
Τι μας προσφέρει το Tailwind CSS
• Ταχύτατο responsive design
Slide 75
Slide 75 text
Τι μας προσφέρει το Tailwind CSS
• Ταχύτατο responsive design
To Tailwind CSS είναι ένα mobile-first framework
Slide 76
Slide 76 text
Τι μας προσφέρει το Tailwind CSS
• Ταχύτατο responsive design
To Tailwind CSS είναι ένα mobile-first framework
Οι κλάσεις εφαρμόζονται πάντοτε από τη χαμηλότερη ανάλυση.
Slide 77
Slide 77 text
Τι μας προσφέρει το Tailwind CSS
• Ταχύτατο responsive design
To Tailwind CSS είναι ένα mobile-first framework
Οι κλάσεις εφαρμόζονται πάντοτε από τη χαμηλότερη ανάλυση.
Αν θελήσουμε να εφαρμόσουμε διαφορετική κλάση σε μία
μεγαλύτερη ανάλυση, προσθέτουμε το αντίστοιχο πρόθεμα.
Slide 78
Slide 78 text
Τι μας προσφέρει το Tailwind CSS
• Ταχύτατο responsive design
To Tailwind CSS είναι ένα mobile-first framework
Οι κλάσεις εφαρμόζονται πάντοτε από τη χαμηλότερη ανάλυση.
Αν θελήσουμε να εφαρμόσουμε διαφορετική κλάση σε μία
μεγαλύτερη ανάλυση, προσθέτουμε το αντίστοιχο πρόθεμα.
class=“flex flex-col” => class=“flex flex-col md:flex-row”
Slide 79
Slide 79 text
Τι μας προσφέρει το Tailwind CSS
• Ταχύτατο responsive design
Slide 80
Slide 80 text
Τι μας προσφέρει το Tailwind CSS
• Το μικρότερο δυνατό μέγεθος για το τελικό αρχείο CSS
Slide 81
Slide 81 text
Τι μας προσφέρει το Tailwind CSS
• Το μικρότερο δυνατό μέγεθος για το τελικό αρχείο CSS
Το μυστικό είναι να «πετάξετε» όσες βοηθητικές κλάσεις δεν
χρειάζεστε
Slide 82
Slide 82 text
Τι μας προσφέρει το Tailwind CSS
• Το μικρότερο δυνατό μέγεθος για το τελικό αρχείο CSS
Το μυστικό είναι να «πετάξετε» όσες βοηθητικές κλάσεις δεν
χρειάζεστε (αξιοποιώντας το εργαλείο purgeCSS)
Slide 83
Slide 83 text
Τι μας προσφέρει το Tailwind CSS
• Το μικρότερο δυνατό μέγεθος για το τελικό αρχείο CSS
Το μυστικό είναι να «πετάξετε» όσες βοηθητικές κλάσεις δεν
χρειάζεστε (αξιοποιώντας το εργαλείο purgeCSS)
Breaking News (30/04/2020) :
https://github.com/tailwindcss/tailwindcss/pull/1639
Slide 84
Slide 84 text
Τι μας προσφέρει το Tailwind CSS
• Το purgeCSS ενσωματώθηκε ήδη στο Tailwind!
Slide 85
Slide 85 text
Πως ενσωματώνουμε το Tailwind
CSS σε ένα WordPress theme
Slide 86
Slide 86 text
Πως ενσωματώνουμε το Tailwind
CSS σε ένα WordPress theme
• Τι χρειάζεται να εγκαταστήσουμε :
Slide 87
Slide 87 text
Πως ενσωματώνουμε το Tailwind
CSS σε ένα WordPress theme
• Τι χρειάζεται να εγκαταστήσουμε :
Το node.js και το npm (απαραίτητα)
Slide 88
Slide 88 text
Πως ενσωματώνουμε το Tailwind
CSS σε ένα WordPress theme
• Τι χρειάζεται να εγκαταστήσουμε :
Το node.js και το npm (απαραίτητα)
To webpack (προαιρετικά, εφόσον θέλουμε να
συνδυάσουμε και άλλα εργαλεία π.χ. purgeCSS)
Slide 89
Slide 89 text
Πως ενσωματώνουμε το Tailwind
CSS σε ένα WordPress theme
• Τι χρειάζεται να εγκαταστήσουμε :
Το node.js και το npm (απαραίτητα)
To webpack (προαιρετικά, εφόσον θέλουμε να
συνδυάσουμε και άλλα εργαλεία π.χ. purgeCSS)
Ένας εύκολος τρόπος να ενσωματώσουμε το webpack,
είναι με χρήση του πακέτου laravel-mix
Slide 90
Slide 90 text
Χρήσιμοι σύνδεσμοι
• Official Tailwind CSS website : https://tailwindcss.com
• Component library made with Tailwind CSS :
https://tailwindui.com/
• A repository for community components using TailwindCSS :
https://tailwindcomponents.com/
• Using Laravel Mix for Your WordPress Theme :
https://dotdev.co/laravel-mix-wordpress/
• Setting up TailwindCSS in a WordPress theme (Underscores) :
https://www.youtube.com/watch?v=TWzp_gDh5EU
Slide 91
Slide 91 text
Σας ευχαριστώ!
Χρυσόστομος Ζαμπετάκης
Full stack web developer | www.istogram.com