2021-web前端-vue结合TailwindCss使用指南-vue-tailwindcss

﹏ヽ暗。殇╰゛Y 2022-12-28 00:43 145阅读 0赞

# vue结合TailwindCss使用指南 #

## vue-cli项目的安装 ##

vue create vue-css
    cd vue-css
    yarn add tailwindcss@1.4.6

## 新建 `tailwind.css`,在 `src/assets` 新建 `css` 文件夹，并新建 `tailwind.css` ##

*  也可以使用命令
    
        touch src/assets/css/tailwind.css

## 再 `tailwind.css` 文件中，添加如下内容: ##

@tailwind base;
    @tailwind components;
    @tailwind utilities;

## main.js`引入`import “./assets/css/tailwind.css” ##

import "./assets/css/tailwind.css"
    or 
    import "@/assets/css/tailwind.css"

## 创建 `Tailwind` 配置文件 ##

npx tailwind init
    or
    npx tailwind init --full

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 1]

## 新建 `postcss.config.js` 文件 ##

const purgecss = require('@fullhuman/postcss-purgecss')({ 
        content: [
          './src/**/*.html',
          './src/**/*.vue',
          './src/**/*.jsx',
        ],
     
        // Include any special characters you're using in this regular expression
        defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
      })
     
    module.exports = { 
        plugins: [
          require('tailwindcss'),
          require('autoprefixer'),
          ...process.env.NODE_ENV === 'production'
          ? [purgecss]
          : []
        ]
      }

## 启动项目 ##

yarn serve

## 测试 ##

*  们直接修改 `App.vue` 文件，来看看效果
    
        <template>
          <div class="flex items-center justify-center align-middle">
            <div class="flex h-screen">
              <div class="m-auto">
                <div class="md:flex">
                  <div class="md:flex-shrink-0">
                    <img
                      class="rounded-lg md:w-56"
                      src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80"
                      alt="Woman paying for a purchase"
                    />
                  </div>
                  <div class="mt-4 md:mt-0 md:ml-6">
                    <div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">Marketing</div>
                    <a
                      href="#"
                      class="block mt-1 text-lg leading-tight font-semibold text-gray-900 hover:underline"
                    >Finding customers for your new business</a>
                    <p
                      class="mt-2 text-gray-600"
                    >Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
         
        <style>
        </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20221120/cd32fc9b868842e497ef559c11bfbbf0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201212191619557.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA=,size_16,color_FFFFFF,t_70