tailwiind init

1. init

npm init -y

npm install tailwindcss  postcss-cli  autoprefixer

npx tailwind init

2. postcss.config.js

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

@tailwind base;

@tailwind components;

@tailwind utilities;

4. package.json

  "scripts": {
    "dev": "postcss src/css/tailwind.css -o  public/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>

来源：https://www.cnblogs.com/fenle/p/11407969.html

标签

css

postcss

require

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!