使用tailwindcss实现文章的快速排版

Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的类，它们能直接在脚本标记语言中组合起来，构建出任何设计。tailwindcss生产环境非常小，并且一切皆是响应式的。

首先来看一个demo,这是没有任何css样式时的文章

 这是使用tailwindcss一键美颜后的文章

是不是感觉像网恋和奔现的区别？

tailwindcss的安装以及引入就不在这里进行赘述了，可在官网查看Installation: Tailwind CLI - Tailwind CSS

现在我们假设大家已经在项目中成功的引入了tailwindcss,接下来进入正题，如何使用tailwindcss进行快速文章排版呢？

1、在终端中使用 npm install @tailwindcss/typography@latest 命令安装所需资源。

2、在tailwind.config.js文件中plugins下配置 plugins: [require('@tailwindcss/typography')]，如果没有tailwind.config.js文件，可在终端使用npx tailwindcss init命令生成。如下：

module.exports = {
    content: ["./*.{html,js}"],
    theme: {
        extend: {},
    },
    plugins: [require('@tailwindcss/typography')],
}

3、在项目中使用prose类，效果如下：

 瞬间就从丑小鸭变成了白天鹅！因为prose类中已经帮我们写好了h1,h2,p,a,img,video等等一系列文章中常常会用到的标签样式。当然，我们也可以自己制定样式，给大家举几个栗子：

prose-h2:text-indigo-500,这个类是改变文章中所有的h2标签颜色（冒号后面的类名均为tailwind官网中提供的类，可根据情况自由修改）

prose-video:h-96，改变文章中视频的高

prose-p:italic prose-p:text-lg，改变文章中字体样式及字体大小

prose-a:text-teal-600 prose-a:cursor-pointer hover:prose-a:text-teal-500，这三个类是改变文章中a标签的颜色及鼠标样式

prose-img:rounded-2xl prose-img:shadow-2xl，这两个类是改变文章中图片的圆角以及阴影效果

prose-pre:bg-indigo-100 prose-pre:text-indigo-800，设置文章中pre标签的背景颜色与字体颜色 ​​​​​​

prose-headings:underline，让文章中所有的标题都加上下划线 可以看到无论一级标题还是二级标题都加上了下划线

 至此，我们已经快速的完成了一篇文章的排版，并且除了article标签之外，没有在别的地方添加过任何样式。

使用prose的好处就是在文章内容很规整的前提下，还能灵活实现个性化定制，不会出现间距不同的问题，并且减少了很多重复的代码，只写一次就可以实现多次复用，代码结构也非常清晰。

 完整代码如下：

<article class="m-auto py-8 prose prose-h2:text-indigo-500 prose-a:text-teal-600 prose-a:cursor-pointer
        hover:prose-a:text-teal-500 prose-img:rounded-2xl prose-img:shadow-2xl prose-pre:bg-indigo-100 prose-pre:text-indigo-800
        prose-video:h-96 prose-p:italic prose-p:text-lg prose-headings:underline">
            <h1>这里是文章标题</h1>
            <div>
                <h2>内容一</h2>
                <video controls="controls"></video>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aperiam beatae dicta dolor doloremque eos labore quaerat tenetur. Autem deleniti, et facere id iusto non quo ratione reprehenderit unde veniam?</p>
                <img src="img/img.png" alt="图片">

                <h2>内容二</h2>
                <p>Lorem ipsum dolor sit amet, <a>consectetur</a> adipisicing elit. <a>Aliquam</a> dicta dolore dolores, ea earum enim est et, facere fuga ipsam, itaque laboriosam libero odio perferendis rerum sequi similique sunt voluptatum?</p>
                <img src="img/img.png" alt="图片">

                <h2>内容三</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet autem consequatur deserunt dignissimos dolore explicabo fuga ipsum iste iusto, magni molestias nam officiis porro quas quia recusandae repellat sunt totam.</p>
                <img src="img/img.png" alt="图片">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                <p> Aut debitis facilis id numquam recusandae reiciendis saepe soluta ullam. Blanditiis ipsum mollitia nihil. Doloribus, et fuga id neque nisi porro recusandae.</p>
                <pre>
                    module.exports = {
                        variants: {
                            extend: {
                            // ...
                    +       textColor: ['active'],
                            }
                        }
                    }
                </pre>
            </div>
        </article>