前端好朋友 — tailwindcss

.banner {
&__heading {
&-title {
font-size: 20px;
}
}
}
// anthor.scss
@media(min-width: 768px){
xxxxxxx
}
<div class="bg-block">
<div class="text-5xl font-bold md:text-3xl">Tailwind</div>
</div>

Tailwindcss 寫太長怎麼辦

// css
.my-foo {
@apply text-xl font-bold text-red-500;
}
// html
<div class="my-foo">Tailwindcss></div>

CSS 命名

user-cart
user-cart__content
user-cart__content-show
這時突然 user-cart 多了一層
就要變成
user-cart__想單字
<div class="flex items-center justify-between">
<div class="flex items-center">
<h2 class="text-3xl text-green-500">hi, Tailwind</h2>
</div>

統一團隊的 style 風格

module.exports = {
theme: {
extend: {
colors: {
primary: '#0d6efd',
danger: '#dc3545',
warning: '#ffc107',
info: '#0dcaf0',
red: 'red',
},
},
},
}
// 文字主色
<div class="text-primary"></div>
// 背景主色
<div class="bg-primary"></div>
// text 是 warning
<div class="text-warning"></div>

不夠用的功能怎麼辦?

addVariant('data-active', ({ modifySelectors, separator }) => {
modifySelectors(({ className }) => {
return `.${e(`data-active${separator}${className}`)}[data-active="true"]`;
})
});
<div class="hidden data-active:block" data-active="true"></div>
hidden 是 display none
當 data-active 是 ture 的時候,就變成 block
這時只能說,Cow 北的好用呀
<div class="text-black data-active:text-red-500">active 的話,字就是紅色</div>
addVariant('logged-in', ({ modifySelectors, separator }) => {
modifySelectors(({ className }) => {
return `body[class*="logged-in"] .${e(`logged-in${separator}${className}`)}`
})
});
<div class="hidden logged-in:block">登入才看的到</div>
完全不需要再另開一個 css

tailwindcss 檔案更小

不推 Material UI 的原因

eslint prettier stylelint

// prettier.config.js 只需要在這加上 tailwindConfig 路徑即可
module.exports = {
tailwindConfig: './tailwind.config.js',
// 略
};

工商服務

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Milk Midi

Milk Midi

More from Medium

Web Professionals’ Top 13 Open-Source Software Apps

The Joys of Tailwind CSS

Static Site Generators: Gatsby vs. Next.js in 2022

Static Site Generators: Gatsby vs. Next.js in 2022

Tailwind.css basics