今、はやりのユーティリティファーストで低レベルなCSSフレームワークを紹介！

1. Tailwind.css
CSS
2020/11/21

2. CSS

3. CSS
→ → CSS

4. Tailwind.css
CSS
.w-16※
width: 4rem;
※ 0 64 1/3 auto full screen
.bg-whit
e
background-color: #fff;
.text-gray-600
※
color: #718096;
※ 100 900 9
CSS

5. Bootstrap4
CSS
<!—- Bootstrap4 -—
>
<button class="btn btn-
primary">Button</button
>
<!—- Tailwind.css —-
>
<button class="bg-blue-500
hover:bg-blue-600 text-white
font-bold py-2 px-4 rounded">
Butto
n
</button>
Tailwind.css Bootstrap4
CSS
@apply
CSS

6. Tailwind.css
UI

7. CSS
CSS
.w-16
※
width: 4rem;
※ 0 64 1/3 auto full screen
.bg-whit
e
background-color: #fff;
.text-gray-600
※
color: #718096;
※ 100 900 9
CSS flex
grid CSS
VSCode
.w-16※
width: 4rem;
※ 0 64 1/3 auto full screen
.bg-whit
e
background-color: #fff;
.text-gray-600
※
color: #718096;
※ 100 900 9

8. VSCode

9. Tailwind.css

10. <div class="justify-start sm:justify-center
md:justify-end lg:justify-
between xl:justify-around"></div>
sm, md, lg, xl
CSS
Media Query
// Media Query
@media screen and (min-width:480px) {
.hoge {
/* CSS
*/
}
}

11. Tailwind.css

12. CSS
// tailwind.config.js
module.exports =
{
theme:
{
screens: { // Media Query tablet desktop
tablet: '768px',
desktop: '1024px',
}
,
colors:
{
primary: { // primary-100 primary-900
CSS
100: '#ebf8ff'
,
300: '#90cdf4'
,
500: '#4299e1'
,
700: '#2b6cb0'
,
900: '#2a4365'
,
}
,
secondary:
{
100: '#fffff0'
,
300: '#faf089'
,
500: '#ecc94b'
,
700: '#b7791f'
,
900: '#744210'
,
}
,
}
,
extend:
{
boxShadow:
{
huge: '0 30px 60px -15px rgba(0, 0, 0, .25)
'
}
}
}
}
Tailwind.css CSS
Tailwind.css

13. CSS
<!-- @apply --
>
<button class="bg-blue-500 hover:bg-blue-600
text-white font-bold py-2 px-4 rounded"
>
Butto
n
</button
>
<!-- @apply --
>
<button class="btn btn-blue"
>
Butto
n
</button
>
<style
>
.btn
{
@apply font-bold py-2 px-4 rounded
;
}
.btn-blue
{
@apply bg-blue-500 text-white
;
}
.btn-blue:hover
{
@apply bg-blue-600
;
}
</style>
CSS Tailwind.css
@apply

15. UI CSS
UI

20. END