vue2安装tailwindcss的详细步骤

更新时间：2023年08月17日 14:51:08 作者：技术杨

这篇文章主要介绍了vue2安装tailwindcss，本文分步骤结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

官方网址：https://www.tailwindcss.cn/docs/installation

安装步骤：

直接安装
创建文件 tailwindcss.css
main.js全局引入文件 tailwindcss.css
在项目更目录下执行初始化配置文件指令

第一步：直接安装　　

　npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

第二步：创建文件 tailwindcss.css, 推荐放到样式文件夹下，比如style/ 或者 assets/ 下面。
在 tailwindcss.css 文件内写入如下内容：

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

第四步：在项目更目录的终端，执行如下指令，一定要有 -p
npx tailwindcss init -p
之后会在根目录下面自动创建如下两个文件

postcss.config.js文件内容：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

tailwind.config.js文件内容：

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

最后，就可以愉快的在组件内使用tailwindcss语法了，下面做一个简单的测试demo。
官方首页就有demo，我们可以直接copy下来看下是否有效：（图片链接自行替换）

<figure class="md:flex bg-white rounded-xl p-8 md:p-0">
        <img class="w-32 h-32 md:w-48 md:h-auto rounded-l-xl mx-autol" src="../../../assets/logo.jpeg" alt="" width="384" height="512" />
        <div class="pt-6 md:p-8 text-center md:text-left space-y-4">
            <blockquote>
                <p class="text-lg font-semibold">
                    “Tailwind CSS is the only framework that I've seen scale on large teams. It's easy to customize, adapts to any design,
                    and the build size is tiny.”
                </p>
            </blockquote>
            <figcaption class="font-medium">
                <div class="text-cyan-600">Sarah Dayan</div>
                <div class="text-gray-500">Staff Engineer, Algolia</div>
            </figcaption>
        </div>
    </figure>

效果如下：

到此这篇关于vue2安装tailwindcss的文章就介绍到这了,更多相关vue2安装tailwindcss内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

关于vuex的数据持久化处理方式
这篇文章主要介绍了关于vuex的数据持久化处理方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
vue数据push后不能响应式更新的问题
这篇文章主要介绍了vue数据push后不能响应式更新的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
vue-cli和v-charts实现可视化图表过程解析
这篇文章主要介绍了vue-cli和v-charts实现可视化图表过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-10-10
vue v-viewer组件使用示例详解(v-viewer轮播图)
这篇文章主要介绍了vue v-viewer组件使用示例详解(v-viewer轮播图),本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-02-02
vue3项目中ESLint配置和使用
在用vite创建vue3项目时已经选择了添加ESLint,本文就来介绍一下ESLint在项目中需要怎样配置和使用,具有一定的参考价值,感兴趣的可以了解一下
2023-09-09
vue使用天地图、openlayers实现多个底图叠加显示效果
这篇文章主要介绍了vue使用天地图、openlayers实现多个底图叠加显示,根据返回的经纬度列表通过天地图、openlayers实现底图添加，本文通过示例代码给大家介绍的非常详细，需要的朋友参考下吧
2022-04-04
element-ui中使用upload组件获取上传文件信息
这篇文章主要介绍了element-ui中使用upload组件获取上传文件信息方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07
详解vue组件开发脚手架
本篇文章给大家详细分析了vue组件开发脚手架的相关内容以及知识点，对此有兴趣的朋友可以学习参考下。
2018-06-06
Vue3系列教程之插槽slot详解
插槽（slot）可以说在一个 Vue 项目里面处处都有它的身影，比如我们使用一些UI 组件库的时候，我们通常可以使用插槽来自定义我们的内容，今天通过本文给大家介绍vue3插槽slot的相关知识，感兴趣的朋友一起看看吧
2022-08-08
详解webpack + vue + node 打造单页面(入门篇)
本篇文章主要介绍了详解webpack + vue + node 打造单页面(入门篇) ，非常具有实用价值，需要的朋友可以参考下
2017-09-09

vue2安装tailwindcss的详细步骤

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具