Tailwind CSS 插件设置

Tailwind CSS 提供了一些官方插件。让我们检查一下如何设置tailwindcss / line-clamp，这是插件之一。

当在浏览器上显示像下面这样的长句时，它也会在浏览器上显示多行。

<div class="m-20">
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit a in ad voluptatem necessitatibus et laborum, minus amet aliquid pariatur fugit recusandae neque illum voluptatibus repellendus est natus harum modi maxime eos aliquam eum ratione tempore? Sapiente nam corrupti odio quibusdam dolore harum consequatur sint mollitia at? Voluptas quae eligendi quia omnis porro totam laudantium dolorum. Ipsum quasi cupiditate expedita! Dolor ut voluptatibus quos ipsa beatae, accusamus, a incidunt provident, delectus tempore id ex placeat quo laboriosam iusto velit animi molestiae dignissimos sint perspiciatis quis accusantium maxime corrupti. Repellat hic error in totam consequuntur non magni maiores quibusdam quidem cum.
  </div>
</div>

如果你只想查看前几行而不是所有行，则可以使用插件 tailwindcss / line-clamp。

% npm install @tailwindcss/line-clamp
复制代码

安装完成后，需要在tailwind.config.js中注册安装包的信息。

plugins: [
        require('@tailwindcss/line-clamp'),
    ],
复制代码

进行设置后，你将需要构建。运行 npm run build。构建完成后，使用插件的设置就完成了。

line-clamp 设置 line-clamp 后要显示的行数，如下所示。

<div class="m-20">
  <div class="line-clamp-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit a in ad voluptatem 
//略
  </div>
</div>
复制代码

只能显示设置了 line-clamp-3 的 3 行。

至此，我们已经了解了什么是 Tailwind CSS？搭建Tailwind CSS环境、如何使用 Tailwind CSS？ Tailwind CSS 定制以及插件的使用，相信大家对Tailwind CSS已经有一个全面的认识，接下来就是动手写了。