Vite6+React18+Ts项目模板-08.集成tailwindcss原子样式

Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件、以及任何其他模板中的类名，生成相应的样式，然后将它们写入静态 CSS 文件。

它快速、灵活且可靠 — 具有零运行时间。Vite6与tailwindcss v4的集成非常简单，步骤如下

1.安装 Tailwind CSS

通过 npm 安装 tailwindcss 和 @tailwindcss/vite。

npm install tailwindcss @tailwindcss/vite

2.配置 Vite 插件

将 @tailwindcss/vite 插件添加到你的 Vite 配置中。

vite.config.ts

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

3.导入 Tailwind CSS

在你的 CSS 文件中 src\main.css 添加一个 @import 以导入 Tailwind CSS。

@import 'tailwindcss';

:root {
  --theme-color-primary-500: oklch(0.72 0.11 178);
}

/**
去掉这个告警，可以通过vscode 文件-首选项-设置-，输入 css unknow ，将未知的 @ 规则改为 ignore
*/
@theme {
  --color-primary-500: var(--theme-color-primary-500);
  --color-warning-300: red;
}

在 main.ts 里引入 main.css 文件

import { createRoot } from 'react-dom/client';
import './main.css';
import App from './app.tsx';

createRoot(document.getElementById('root')!).render(<App />);

4.代码提示插件

Visual Studio Code 的官方 Tailwind CSS 智能感知 扩展通过为用户提供自动补齐、语法高亮和代码检查等高级功能来增强 Tailwind 开发体验。

Tailwind CSS IntelliSense

5.使用 Prettier 进行类排序(Class sorting with Prettier)

Tailwind CSS 官方 维护了一个 Prettier 插件，它会自动按照 推荐的类顺序 对你的类进行排序。

<!-- Before -->
<button class="text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800">Submit</button>
<!-- After -->
<button class="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3">Submit</button>

安装

npm install -D prettier prettier-plugin-tailwindcss

配置

// .prettierrc
{
  "plugins": ["prettier-plugin-tailwindcss"]
}

更多更具体的配置可前往Github仓库查看

https://github.com/tailwindlabs/prettier-plugin-tailwindcss

6.使用tailwind构建一个搜索组件

代码

function Search() {
  return (
    <>
      <div className="rounded flex h-9.5 border border-gray-300 focus-within:border-blue-700">
        <i className="ic ic-search flex justify-center items-center w-12 h-full text-gray-400"></i>
        <input type="text" className="flex-1" />
        <i className="ic ic-star  justify-center flex items-center w-9 h-full text-gray-400"></i>
        <i className="ic ic-star flex justify-center items-center w-9 h-full text-gray-400"></i>
      </div>
      <div>
        <ul className="py-2.5">
          <li className="border px-2.5 py-1  border-gray-300 opacity-70 mb-2.5 hover:border-blue-300 hover:opacity-100">
            <a href="">
              <div className="text-blue-300 text-lg font-thin ">
                #部署静态站点 Vercel Vercel CLI
              </div>
            </a>
          </li>
          <li className="border px-2.5 py-1  border-gray-300 opacity-70 mb-2.5 hover:border-blue-300 hover:opacity-100">
            <a href="">
              <div className="text-blue-300 text-lg font-thin">
                #部署静态站点 Vercel Vercel CLI
              </div>
              <div className="text-sm overflow-hidden max-h-25 *:text-sm">
                <h4>类型签名</h4>
                <p>
                  内容内容的内容的内容的内容的内容的内容的内容的内容的内容的的
                </p>
                <p>
                  内容内容的内容的内容的内容的内容的内容的内容的内容的内容的的
                </p>
                <p>
                  内容内容的内容的内容的内容的内容的内容的内容的内容的内容的的
                </p>
                <p>
                  内容内容的内容的内容的内容的内容的内容的内容的内容的内容的的
                </p>
                <p>
                  内容内容的内容的内容的内容的内容的内容的内容的内容的内容的的
                </p>
                <p>
                  内容内容的内容的内容的内容的内容的内容的内容的内容的内容的的
                </p>
                <p>
                  内容内容的内容的内容的内容的内容的内容的内容的内容的内容的的
                </p>
              </div>
            </a>
          </li>
          <li className="border px-2.5 py-1  border-gray-300 opacity-70 not-last:mb-2.5 hover:border-blue-300 hover:opacity-100">
            <a href="">
              <div className="text-blue-300 text-lg font-thin">
                #部署静态站点 Vercel Vercel CLI
              </div>
              <div className="text-sm  overflow-hidden max-h-25">
                <h4>类型签名</h4>
                <p>
                  内容内容的内容的内容的内容的内容的内容的内容的内容的内容的的
                </p>
              </div>
            </a>
          </li>
        </ul>
      </div>
      <div>
        <i className="ic ic-star text-xs rounded bg-[#8080801a] text-[#999] px-2 py-1.5 mr-1"></i>
        <i className="ic ic-search text-xs rounded bg-[#8080801a] text-[#999] px-2 py-1.5 mr-1"></i>
        <span className="mr-4 text-gray-600 text-xs">to navigate</span>
        <i className="ic ic-star text-xs rounded bg-[#8080801a] text-[#999] px-2 py-1.5 mr-1"></i>
        <span className="mr-4 text-gray-600 text-xs">to select</span>
        <i className="ic ic-star text-xs rounded bg-[#8080801a] text-[#999] px-2 py-1.5 mr-1"></i>
        <span className="mr-4 text-gray-600 text-xs">to close</span>
      </div>
    </>
  );
}
export default Search;

效果

7.一个将原生css转为tailwind样式的例子

该 common-go-top 类是一个返回到顶部的容器类

转换前

.common-go-top {
  z-index:99;
  position:fixed;
  background:rgba(255,255,255,.8);
  color:#999;
  border:1px solid #ddd;
  border-radius:50%;
  width:50px;
  height:50px;
  text-align:center;
  bottom:70px;
  right:15px;
  font-size:10px;
  line-height:18px;
  padding-top:3px;
  box-sizing:border-box;
  cursor: pointer;
}
@media screen and (min-width: 900px){
  .common-go-top {
    right:20px;
  }
}
@media screen and (min-width: 1400px){
  .common-go-top {
    right:30px;
  }
}

对应的tailwind样式

<div className="
  fixed z-[99] 
  w-[50px] h-[50px] 
  bg-white/80 text-gray-400 
  border border-gray-300 rounded-full 
  text-center 
  bottom-[70px] right-[15px] 
  text-[10px] leading-[18px] pt-[3px] 
  box-border cursor-pointer
  md:right-[20px] 
  xl:right-[30px]
">
  {/* 内容 */}
</div>