tailwiind init

1. init

npm init -y

npm install tailwindcss  postcss-cli  autoprefixer @fullhuman/postcss-purgecss -D

npx tailwind init

2. postcss.config.js

const purgecss = require('@fullhuman/postcss-purgecss')({

content: [

'./src/**/*.html',

'./src/**/*.vue',

// whitelist: ['mdi-check'],

// whitelistPatterns: [/el-.+$/, /^area/, /^vue-treeselect/],

// whitelistPatternsChildren: [/el-.+$/],

defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []

})

module.exports = {

plugins: [

require('tailwindcss'),

require('autoprefixer'),

...process.env.NODE_ENV === 'production' ? [purgecss] : []

]

}

3. src/css/tailwind.css

@tailwind base;

@tailwind components;

@tailwind utilities;

4. package.json

  "scripts": {
      "dev": "postcss src/css/tailwind.css -o  public/css/all.css",
      "prod": "cross-env NODE_ENV=production postcss src/css/tailwind.css -o  public/css/all.css"
  },

// windows

  "scripts": {
    "dev": "set NODE_ENV=dev&&postcss ./tw.css -o  ./static/css/all.css",
    "build": "set NODE_ENV=production&&postcss ./tw.css -o  ./static/css/all.css"
  },

5. public/index.html

    <title>index</title>

　　<link rel="stylesheet" href="./css/all.css">

<body>

<h1 class="text-xl font-bold text-blue-500 text-center">Hello World!</h1>

6. vue project

1) remove postcss config in package.json

2) add it in main.js

import '@/assets/css/tailwind.css'

posted on 2019-08-25 15:07 jzfan 阅读(175) 评论(0) 编辑收藏举报