Tocas: 能引入像tailwindcss那样的功能吗

[jet10000]

tailwindcss感觉很有优势呢，避免过早抽象，足够的灵活性。我最近在想，如果在tailwindcss的基础上创建tocas-ui，这样能解决像bootstrap一样，不仅能快速制作产品原型，同时为未来进一步开发，提供足够的灵活性和便捷性。

[YamiOdymel]

上幾個星期有稍微研究過這個問題。

Tailwind CSS 走就是原子性 CSS（Atomic CSS），他強調的是透過 Inline Class 來定義一個元件（例如：.bg-blue .size-12px），而不是替一個按鈕建立個體樣式（如：.button-primary）。

主要是因為有一派 React 使用者覺得替某些元件（Component）特別定義樣式很繁雜，不如直接把樣式寫在元素（Element）上，這樣還可以把樣式復用，省了不少程式碼一舉兩得。

但這個方法跟 Tocas UI 已經事先幫你建立好元件的想法則差很遠—

因為 Atomic CSS 更像是你能夠完美地打造你心目中所想要的外觀網站，而 Tocas UI 則是提供現有的元件讓你能夠依照你已經實作的功能快速打造出一個 _堪用_ 的介面出來。

如果 Tocas UI 也校仿 Tailwind CSS 透過像 .rounded-4px .bg-white 製作出一張卡片，那麼這個呈現的效果跟 Tailwind CSS 基本上不會有什麼差別，不如直接用 Tailwind 就好了。

---

延伸閱讀：

https://basscss.com/
https://funcssion.com/
https://github.com/grabr/quantum-css
https://tachyons.io/

[jet10000]

bootstrap之所以成功，就是解决了产品快速原型。tailwindcss目前这是他的弱点，但也在弄一个tailwind components。tocas-ui也能快速产品原型，但是结合不了Atomic CSS的一些优势。任何事情都有利弊，但从产品开发角度讲，快速原型，接着能灵活添加复杂组件和优化样式，这样太多好处了。

[jet10000]

另外tailwindcss，也可以实现直接将样式写在元素上。

<!-- Extracting component classes: -->
<button class="btn btn-blue">
  Button
</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-700;
  }
</style>

[jet10000]

其实对tocas-ui来讲，实现并不难，只需要抽象出这一个Atomic CSS层，然后在Atomic CSS之上构建tocas-ui。再让tocas-ui能很好的结合svelte，vue，react，就太棒了。

[YamiOdymel]

一年之後再來看這個 Issue 其實是蠻有機會的，因為有很多 Tocas 元件都想要搞封裝。

但如果要抽出 Atomic CSS，那麼為什麼不直接以 Tailwind CSS 為基礎去開發 Tocas Components 呢 🤔