tailwiind init

Posted 2022-08-24 fenle

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

以上是关于tailwiind init的主要内容，如果未能解决你的问题，请参考以下文章

WKUserScript for MainFrameOnly