Prezentacja, która miała miejsce 2018-03-07 w Poznaniu. Wykonanie: Amadeusz Kozłowski (HighSolutions). Czy to koniec front-end frameworków jak Bootstrap? Jak wygląda konfiguracja w Tailwind CSS?

1. Koniec CSS?
Jest Tailwind!

2. Amadeusz Kozłowski
Frontend Developer
amadeuszkozlowski@gmail.com

3. #1 Tailwind - Wprowadzenie

4. #2 Tailwind - Instalacja
npm install tailwindcss --save-dev
<link href="https://cdn.…/tailwind.min.css" rel="stylesheet">
<link href="https://cdn.…/preflight.min.css"
rel="stylesheet">
<link href="https://cdn.…/utilities.min.css"
rel="stylesheet">
yarn add tailwindcss --dev

5. #2 Tailwind - Instalacja
./node_modules/.bin/tailwind init [filename]
tailwind.j
s

6. #2 Tailwind - Instalacja
/**
* Normalize.css + some styles.
*/
@tailwind preflight;
/**
* Utility classes based on config file.
*/
@tailwind utilities;

7. #2 Tailwind - Instalacja
● Tailwind CLI
● Webpack
● Gulp
● Laravel Mix
let mix = require("laravel-mix");
let tailwindcss = require('tailwindcss');
mix.sass('resources/assets/sass/app.scss', 'public_html/css')
.options({
processCssUrls: false,
postCss: [ tailwindcss('./tailwindcss.js') ],
});

8. #2 Tailwind - Instalacja
let mix = require("laravel-mix");
let tailwindcss = require('tailwindcss');
mix.sass('resources/assets/sass/app.scss', 'public_html/css')
.options({
processCssUrls: false,
postCss: [ tailwindcss('./tailwindcss.js') ],
});
Konflikt
● Tailwind CLI
● Webpack
● Gulp
● Laravel Mix

9. #3 Tailwind - Konfiguracja
// ...
var colors = {
'transparent': 'transparent',
// ...
'pink-lightest': '#ffebef',
}
// ...
Kolory

10. #3 Tailwind - Konfiguracja
Kolory
73 colors (default) : 36.4kb ~ 1,5 Bootstrap
50 colors: 30.4kb
25 colors: 18.3kb

11. #3 Tailwind - Konfiguracja
Kolory
73 colors (default) : 36.4kb ~ 1,5 Bootstrap
50 colors: 30.4kb
25 colors: 18.3kb
colors
textColors: colors
backgroundColors: colors
borderColors: Object.assign({ default: colors['grey-light'] }, colors),

12. #3 Tailwind - Konfiguracja
Kolory
73 colors (default) : 36.4kb ~ 1,5 Bootstrap
50 colors: 30.4kb
25 colors: 18.3kb
colors
textColors: colors
backgroundColors: colors
borderColors: Object.assign({ default: colors['grey-light'] }, colors),
.text-white { color: white; }
.hover:bg-pink:hover
.group:hover .group-hover:text-white { color: white; }
...

13. #3 Tailwind - Konfiguracja
Kolory
module.exports = {
// ...
colors: colors,
// ...
}
.error { color: config('colors.red')
}

14. #3 Tailwind - Konfiguracja
Responsywność
/*
|
| Class name: .{screen}:{utility}
|
*/
screens: {
'sm': '576px', // => @media (min-width: 576px) { ... }
'md': '768px',
'lg': '992px',
'xl': '1200px',
},

15. #3 Tailwind - Konfiguracja
Style /*
|
| Class name: .text-{size}
|
*/
textSizes: {
'xs': '.75rem', // 12px
'sm': '.875rem', // 14px
'base': '1rem', // 16px
'lg': '1.125rem', // 18px
'xl': '1.25rem', // 20px
'2xl': '1.5rem', // 24px
'3xl': '1.875rem', // 30px
'4xl': '2.25rem', // 36px
'5xl': '3rem', // 48px
'6xl': '4rem', // 62px
},
/*
|
| Class name: .p{side?}-{size}
|
*/
padding: {
'px': '1px',
'0': '0',
'1': '0.25rem',
'2': '0.5rem',
'3': '0.75rem',
'4': '1rem',
'5': '1.25rem',
'6': '1.5rem',
'8': '2rem',
},

16. #3 Tailwind - Konfiguracja
Style /*
|
| Class name: .text-{size}
|
*/
textSizes: {
'xs': '.75rem', // 12px
'sm': '.875rem', // 14px
'base': '1rem', // 16px
'lg': '1.125rem', // 18px
'xl': '1.25rem', // 20px
'2xl': '1.5rem', // 24px
'3xl': '1.875rem', // 30px
'4xl': '2.25rem', // 36px
'5xl': '3rem', // 48px
'6xl': '4rem', // 62px
},
<div class="text-sm"></div>
font-size: .875rem // 14px

17. #3 Tailwind - Konfiguracja
Moduły
modules: {
...
overflow: false,
textAlign: ['responsive'],
backgroundColors: ['responsive', 'focus', 'hover', 'group-
hover'],
...

18. #3 Tailwind - Konfiguracja
Moduły modules: {
overflow: false,
textAlign: ['responsive'],
backgroundColors: ['responsive', 'focus', 'hover', 'group-
hover'],
<div class="group bg-white hover:bg-blue ...">
<p class="text-black group-hover:text-white ...">Lorem</p>
<p class="text-grey-darker group-hover:text-white
...">ipsum</p>
</div>

19. #3 Tailwind - Konfiguracja
Opcje
zaawansowane
options: {
prefix: 'tw', // tw-mb-4
important: false,
separator: ':', // sm:tw-mb-4
},

20. #4 Tailwind - Komponenty
.btn-blue {
@apply .bg-blue .text-white .font-bold .py-2 .px-4 .rounded;
}
.btn-blue:hover {
@apply .bg-blue-dark;
}
<button class="btn-blue">
Button
</button>

21. #5 Tailwind - @screen
.btn {
@apply .md:inline-block;
}
@screen md {
.btn {
@apply .inline-
block;
}
}

22. #6 Tailwind - PurgeCSS

23. #6 Tailwind - PurgeCSS

24. #6 Tailwind - PurgeCSS
if (mix.inProduction()) {
mix.webpackConfig({
plugins: [
new purgeCss({
paths: glob.sync([
path.join(__dirname, 'resources/views/**/*.blade.php'),
path.join(__dirname, 'resources/assets/js/**/*.vue'),
path.join(__dirname, 'resources/assets/js/**/*.js')
]),
extractors: [
{
extractor: class { static extract(content) { return content.match(/[A-z0-9-:/]+/g) }
},
extensions: ['html', 'js', 'php', 'vue']
}
]
})
]
});
}

25. #6 Tailwind - Presets
composer require laravel-frontend-presets/tailwindcss
php artisan preset tailwindcss
npm install
npm run dev
(opcjonalnie) php artisan preset tailwindcss-auth

26. #6 Tailwind - Presets
var colors = {
// ...
get ['brand-darkest']() { return this['pink-darkest']; },
get ['brand-darker']() { return this['pink-darker']; },
get ['brand-dark']() { return this['pink-dark']; },
get ['brand']() { return this['pink']; },
get ['brand-light']() { return this['pink-light']; },
get ['brand-lighter']() { return this['purple-lighter']; },
get ['brand-lightest']() { return this['pink-lightest']; },
};

27. Amadeusz Kozłowski
amadeuszkozlowski@gmail.com