tailwiind init

時間 2019-11-18

標籤 tailwiind init 简体版

原文原文鏈接

1. initcss

npm init -y

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

npx tailwind init

2. postcss.config.jshtml

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

    content: [
        './src/**/*.html',
        './src/**/*.vue',   
    ],

    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.cssvue

@tailwind base;

@tailwind components;

@tailwind utilities;

4. package.jsonnpm

  "scripts": {
    "dev": "postcss src/css/tailwind.css -o  public/css/all.css"
  },

// windowsjson

  "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.htmlwindows

    <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 projectpost

1) remove postcss config in package.jsonui

2) add it in main.jsspa

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。