Chrome插件开发 - 集成tailwind

在上一篇文章【New Tab】学习了创建第一个标签。

这篇文章学习集成tailwind

安装依赖

#初始化node项目
npm init -y

#安装parcel和tailwind
npm i parcel tailwindcss

#安装Parcel静态资源复制和postcss
npm i -D parcel-reporter-static-files-copy postcss-cli

迁移静态资源

在根目录创建static文件夹，移动manifest.json和icons文件到static

创建.parcelrc

{
  "extends": ["@parcel/config-default"],
  "reporters": ["parcel-reporter-static-files-copy"]
}

集成 tailwind

在根目录创建.postcssrc.json

{
  "plugins": {
    "tailwindcss": {}
  }
}

执行npx tailwind init，tailwind 将会自动创建taiwind.config.js

module.exports = {
  content: ['*.html'],
  theme: {
    extend: {}
  },
  variants: {
    extend: {}
  },
  plugins: []
}

打开css/style.css替换所有

@tailwind base;
@tailwind components;
@tailwind utilities;

修改 package.json

{
  "scripts": {
    "prebuild": "rm -rf dist .parcel-cache",
    "watch": "parcel watch new-tab.html",
    "build": "parcel build new-tab.html"
  }
}

执行npm run build，与之前不同的是，chrome 插件加载已解压文件的时候选择dist

【Source Code】