webstorm+vue+tailwind制作小表单

1.创建vue项目使用webstorm
2.安装 tailwind

3.创建tailwind.config.css ,postcss.config.js

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    minWidth: {
      '0': '0',
      '1/4': '25%',
      '1/2': '50%',
      '3/4': '75%',
      'full': '100%',
    },
    width:{
      '95/100':'95%',
      '1/4':'25%',
      '1/2':'50%'
    }
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

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]
            : []
    ]
}

4.修改相关代码 APP.vue引入component 新建window.vue

<template>
  <div class="md:container md:mx-auto w-95/100  shadow-md m-auto p-2.5">
    <h3 class="text-center font-bold">Infomation Collect Form</h3>
    <div class="flex my-1.5">
      <label class="w-1/4">name：</label><input name="name" v-model="formData.name" class="border border-red-500 border-dashed rounded hover:border border-purple-500" autocomplete="off">
    </div>
    <div class="flex my-1.5">
      <label class="w-1/4">age：</label><input name="age" v-model="formData.age" class="border border-red-500 border-dashed rounded hover:border border-purple-500" type="number">
    </div>
    <div class="flex my-1.5">
      <label class="w-1/4">gender：</label>
      <input type="radio" name="gender" value="1" v-model="formData.gender" class="my-auto ml-2.5">male
      <input type="radio" name="gender" value="2" v-model="formData.gender" class="my-auto ml-2.5">female
    </div>

    <div @click="send" class="rounded-full py-2 px-6... text-center bg-gradient-to-r from-red-500 to-blue-600 text-white w-1/2 mx-auto bg-opacity-50 hover:bg-blue-600">submit</div>
    <div class=" shadow-md text-red-600 bg-white py-2 text-center fixed  font-thin ml-16 px-1.5" v-if="messages">{{messages}}
    <div class="text-center text-gray-600" @click="deleteMessages">OK</div>
    </div>

  </div>


</template>

<script>
import axios from "axios";
export default {
  name: "window",
  data(){
    return {
      messages:'',
      formData:{
        name:"",
        age:'',
        gender:''
      },

    }

  },
  methods:{
    deleteMessages(){
      this.messages = ""
    },
    send()
    {
      if(!this.formData.age || !this.formData.gender || !this.formData.name){
        this.messages = "PLEASE FILL ALL THE BLANK"
        return
      }

      axios({
        method: 'post',
        data:this.formData,
        url: 'data/success.json'
      }).then(function (res) {
        if(res.data.status === 1){
          this.messages = res.data.message
        }
      });
    }
  }
}
</script>

<template>
  <div id="app" class="border-green-100 h-screen">
    <window msg="Its a window"/>
  </div>
</template>
<script>
import window from './components/window.vue'

export default {
  name: 'App',
  components: {
    window
  }
}
</script>

最终结果