React简单教程-3.1-样式之使用 tailwindcss
<h1 id="前言">前言</h1><p>本文是作为一个额外内容，主要介绍 tailwindcss 的用法</p>
<p>tailwindcss 是一个功能类优先的 CSS 框架，我在以前的文章里有描述为什么使用功能类优先：为什么我在 css 里使用功能类优先</p>
<p>在上一章中我们的 react 组件有了一个简单的样式，在这一篇我们将使用 tailwindcss 来重新编写它的样式。我将使用我们上一章的代码为例子。</p>
<h1 id="tailwind-css-前置知识">Tailwind CSS 前置知识</h1>
<p>不要害怕功能类优先的写法，总体来说它其实和我们传统的 CSS 写法没有什么不同，如果你会写 CSS，那就一定很容易上手功能类优先的写法。</p>
<p>如果你之前使用过 boostrap，那就更容易入手 tailwind 了，你完全可以当成 bootstrap 来写。</p>
<p>如果你完全不会 CSS，只想找一个组件库来使用，那么这篇文章就不适合你了。</p>
<h1 id="安装">安装</h1>
<p>在项目根目录下打开终端，输入</p>
<pre><code class="language-bash">npm install -D tailwindcss@latest
</code></pre>
<p>这个命令将在你的 <code>devDependencies</code> 中安装 tailwindcss，我们只需要在开发时使用这个包，所以确保安装在你的 <code>devDependencies</code> 中。</p>
<p><img src="https://tva1.sinaimg.cn/large/005PljWlgy1h2o8goc6m2j30c805jtae.jpg"></p>
<h2 id="安装-vs-code-插件推荐">安装 vs code 插件，推荐</h2>
<p>如果你使用的时 vs code 编写代码，那么我推荐你安装这个插件，Tailwind CSS IntelliSense，它会在你开发的时候给你提供样式输入的便利。</p>
<h1 id="配置文件">配置文件</h1>
<p>安装好后，在终端中输入命令：</p>
<pre><code class="language-bash">npx tailwindcss init
</code></pre>
<p>将在根目录下帮我们新建一个默认的配置文件。</p>
<p><img src="https://tva1.sinaimg.cn/large/005PljWlgy1h2o8isopzqj30ar07975i.jpg"></p>
<p>配置文件的内容如下：</p>
<pre><code class="language-js">module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
};
</code></pre>
<p>也可以手动创建这个文件。</p>
<p>我们先看这个 <code>content</code> 属性，这个属性用来表示我们要用到样式的源文件路径。我们写入如下的路径：</p>
<pre><code class="language-js">module.exports = {
content: ["./src/**/*.{ts,tsx,jsx,js}"],
theme: {
extend: {},
},
plugins: [],
};
</code></pre>
<p>这样，我们就告诉了 tailwind：根目录 src 文件夹下的所有以 ts,tsx,jsx,js 结尾的文件都会使用 tailwindcss。使用生成 tailwind 生成样式文件的时候会参考这些文件里的 css 类。</p>
<p>其他的配置我们先不说，等使用到了在说明。</p>
<h1 id="生成样式文件">生成样式文件</h1>
<p>在这个时候我们就已经可以使用 tailwind 来生成样式文件了。我们在终端中输入：</p>
<pre><code class="language-bash">npx tailwindcss -o ./src/styles/tailwind.css
</code></pre>
<p>上面的命令用于执行 tailwind 的功能来生成样式文件，参数 <code>-o</code> 指定生成的样式文件放在什么地方。执行之后，你应该会看到如下的输出：</p>
<p><img src="https://tva1.sinaimg.cn/large/005PljWlgy1h2q7hhdt6yj30lb03xq50.jpg"></p>
<p>这是因为你还没有写任何的 tailwind 功能类，所以也就没有生成样式文件。接下来我们在子组件 <code>Displayer</code> 里写功能类，首先先改造 <code>.container</code> 这个类。原来的样式是这样的：</p>
<pre><code class="language-js">// 组件
export function Displayer(/* 省略 */) {
//省略
return (
<div className="container">
{/* 省略 */}
</div>
);
}
//css
.container {
background-color: rgb(40 40 40);
color: white;
padding: 0.5rem;
margin: 0.5rem;
border-radius: 10px;
}
</code></pre>
<p>改为如下写法:</p>
<pre><code class="language-js">// 组件
export function Displayer(/* 省略 */) {
//省略
return (
//功能类写法
<div className="bg-gray-800 text-white p-2 m-2 rounded-lg">
{/* 省略 */}
</div>
);
}
</code></pre>
<p>再执行 <code>npx tailwindcss -o ./src/styles/tailwind.css</code>，生成样式文件，你会在目录下看到生成的文件：</p>
<p><img src="https://tva1.sinaimg.cn/large/005PljWlgy1h2q7ss4x61j30dy02wglx.jpg"></p>
<p>点进入查看内容，你会看到帮你生成的 css 样式，除了一些基本样式之外，在文件的最下方，会看到我们刚刚使用的功能类样式：</p>
<p><img src="https://tva1.sinaimg.cn/large/005PljWlgy1h2q7vkwi42j30ng0eogpe.jpg"></p>
<p>这也是和 bootstrap 不同的地方，bootstrap 是一次导入所有的样式，tailwindcss 是生成你用到的样式，大大减少了体积。</p>
<p>最后我们在我们的根组件下引入 <code>tailwind.css</code> 这个文件。</p>
<pre><code class="language-js">//main.tsx
import "./styles/tailwind.css";
//省略
</code></pre>
<p>启动项目后便能够看到效果了，也是和我们以前一样：</p>
<p><img src="https://tva1.sinaimg.cn/large/005PljWlgy1h2q81isspjj30ds033t91.jpg"></p>
<h1 id="功能类用法解释">功能类用法解释</h1>
<p>我们首先用了如下几个功能类：<code>bg-gray-800 text-white p-2 m-2 rounded-lg</code>。如果你用过 bootstrap 的话，那么你应该对这种写法很熟悉了。如果没用过，那么其实就是普通的 css 类，在 F12 里查看样式，就能看到。tailwind 里定义了一套常用的类给我们使用，像例子中</p>
<ul>
<li><code>bg-gray-800</code> 表示背景颜色（background-color）为灰色（gray），800 表示灰色有多浓厚。</li>
<li><code>text-white</code> 表示字体颜色（color）是白色（white）。</li>
<li><code>p-2</code> 表示内边距（padding）的值为 2，在 tailwind 中是 0.5rem。</li>
<li><code>m-2</code> 表示内边距（margin）的值为 2，在 tailwind 中是 0.5rem。</li>
<li><code>rounded-lg</code> 表示边框圆角（border-radius），要多圆？lg 的程度，在 tailwind 中是 0.5rem。</li>
</ul>
<p>功能类的用法其实直接将我们语义类的用法展开而已。</p>
<h1 id="启动时的配置">启动时的配置</h1>
<p>在我们生成样式文件的时候是在终端输入命令来生成的，这样每次都要敲一遍命令太麻烦了，我们可以把命令修改成</p>
<pre><code class="language-bash">npx tailwindcss -o ./src/styles/tailwind.css --watch
</code></pre>
<p><code>--watch</code> 参数是让 tailwind 监听，随时生成最新的样式文件，这样就不需要时不时手动生成了。</p>
<p>更方便一点，可以将我们的启动脚本修改为：</p>
<pre><code class="language-js">{
//省略
"scripts": {
"dev": "run-p dev:*",
"dev:css": "tailwindcss -o ./src/styles/tailwind.css --watch",
"dev:server": "vite",
//省略
},
"devDependencies": {
//省略
"npm-run-all": "^4.1.5",
//省略
}
//省略
}
</code></pre>
<p>我们让 tailwind 的监听随着我们的项目开发启动而启动，省去了输入命令。</p>
<p>这里我使用了 npm-run-all 这个包，能够帮我们方便的执行多个脚本。使用时要记得先安装，关于用法看文档，在这里不说明。这样在我们使用 <code>npm run dev</code> 的时候，就会启动 tailwind 的监听和启动项目的开发服务器。</p>
<p>修改我们的功能类，你可以看到 tailwind 会自动帮我们生成最新的样式，方便之极。</p>
<h1 id="有那些功能类可以使用">有那些功能类可以使用？</h1>
<p>基本上只要你能用到的效果，tailwind 都有提供。而且除了基本的样式之外，tailwind 也封装了一些常用到的效果，像 <code>ring</code>，这个类用于在元素的周围加上一圈光环。其他效果具体有什么还是要去看文档的 tailwind 文档。</p>
<p>下面我介绍几种比较特殊的用法。</p>
<h2 id="变体">变体</h2>
<p>tailwind 的变体写法是用于实现伪类的样式效果。</p>
<p>比如在我们把鼠标移动到元素后需要元素改变样式，我们会使用到伪类 <code>:hover</code>，在 tailwind 里使用功能类也可以指定应用到伪类，通过添加 <code>hover:</code> 来使关联的功能类在 hover 时生效。示例如下：</p>
<pre><code class="language-html"><div className="hover:text-center"></div>
</code></pre>
<p>上面的写法，在 <code>text-center</code> 前加上 <code>hover:</code> 前缀，使其应用在了 hover 伪类里，相当于：</p>
<pre><code class="language-css">.text-center:hover {
text-align: center;
}
</code></pre>
<p>tailwind 还有许多常用的变体，可在文档 变体 中查看。</p>
<h1 id="封装常用样式">封装常用样式</h1>
<p>如果多个相同元素的样式是一摸一样的，那么每次都重复编写功能类就会显得繁琐。对这种情况推荐封装样式，有以下两种写法。</p>
<h2 id="1-全局类">1、 全局类</h2>
<p>通过在项目中额外引入一个全局的 css 文件，将可重用的样式写在里面。</p>
<p>新建全局 css 文件：</p>
<p><img src="https://tva1.sinaimg.cn/large/005PljWlgy1h2qeljutndj30dc03idga.jpg"></p>
<p>编写样式：</p>
<pre><code class="language-css">/* global.css */
/* 全局样式 */
.btn {
background-color: rgb(81, 81, 206);
text-align: center;
}
</code></pre>
<p>在根目录中引入：</p>
<pre><code class="language-js">import "./styles/global.css";
</code></pre>
<p>之后便可以直接在元素上使用：</p>
<pre><code class="language-html"><button className="btn"></button>
</code></pre>
<h2 id="2包装常用组件">2、包装常用组件</h2>
<p>这也是推荐的方式，包装成一个常用的组件。如下：</p>
<pre><code class="language-js">//将常用的 button 样式封装到新的组件中
export function Button(props: any) {
const { children, ...newProps } = props;
return (
<button className="bg-gray-300" {...newProps}>
{children}
</button>
);
}
</code></pre>
<p>以后便可以用这个组件 <code><Button>按钮</Button></code> 代替原生的 <code><button>按钮</button></code>。</p>
<h1 id="参考">参考</h1>
<p>Tailwind CSS by Tailwind CSS</p><br><br>
来源：https://www.cnblogs.com/dvorakchen/p/16326819.html
頁:
[1]