vue+tailwindcss前端框架

• 安装命令
• 代码补全插件
• 响应式页面Demo1
• sm,md,lg,xl对应分辨率参考

安装命令

npm create ***
cd ***
vue add tailwind
npm install postcss-cli@^7 -g

代码补全插件

npm install autocomplete
安装Tailwind CSS IntelliSense插件

关于为什么要进行版本控制，*上已经有人作答。

Vue 3 is one thing that does not yet have postcss 8 support. You’re integrating Tailwind with a tool that relies on an older version of PostCSS. You can use this doc https://tailwindcss.com/docs/installation#post-css-7-compatibility-build

autoprefixer、postcss

主要解决兼容性问题，使用autoprefixer和postcss-cli给css加上浏览器厂商前缀，让它自动给所有的css文件添加浏览器厂商前缀。因此我们可以使用autoprefixer这个插件来自动给css文件加上浏览器厂商前缀。

响应式页面Demo1

<template>
  <div class="flex bg-white lg:h-3/4">
    <div class="max-w-md m-auto px-10 py-3 sm:px-0 lg:w-full lg:px-10 lg:py-16">
      <div class="flex justify-start items-end">
        <div class="iconfont vacation-bf text-4xl text-indigo-500 font-bold"></div>
        <div class="flex text-2xl ml-3 pt-3 font-semibold">Work<div class="text-indigo-500">cation</div></div>
      </div>
      <img src="./assets/img/img2.jpg" alt="" class="mt-5 rounded-lg shadow-lg lg:hidden">
      <h1 class="mt-5 font-bold text-xl leading-tight text-left sm:text-2xl">
        You can word from anywhere.
        <br>
        <span class="text-indigo-500">Take advantage of it.</span>
      </h1>
      <p class="mt-3 text-gray-500 text-left sm:text-lg">Workcation helps you find work-friendly rentals in beautiful location so you can enjoy some nice weather even when you're not on vation.</p>
      <div class="mt-3 flex justify-items-start">
        <a href="#" class="inline-block bg-indigo-500 text-gray-50 px-3 py-2 shadow-md rounded-md">Book your escape</a>
      </div>
    </div>
    <div class="w-1/2 hidden lg:block lg:relative">
      <img src="./assets/img/img2.jpg" alt="" class="absolute inset-0 w-full h-full object-cover object-center">
    </div>
    <div style=""></div>
  </div>
</template>

sm,md,lg,xl对应分辨率参考

• sm: 640X800
• md: 768X800
• lg: 1024X800
• xl: 1280X800

未完