- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试为使用 TailwindCSS 构建的静态站点设置 webpack。我正在尝试使用 PurgeCSS 制作我的 css 文件并删除任何未使用的内容,但我认为它不起作用。它将编译没有错误,但 css 文件是 16kb,Google lighthouse 审计说有未使用的 css。
webpack.config.js
const path = require("path");
const glob = require("glob-all");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const PurgecssPlugin = require("purgecss-webpack-plugin");
/**
* Custom PurgeCSS Extractor
* https://github.com/FullHuman/purgecss
* https://github.com/FullHuman/purgecss-webpack-plugin
*/
class TailwindExtractor {
static extract(content) {
return content.match(/[A-z0-9-:\/]+/g);
}
}
module.exports = {
entry: "./index.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "styles.css"
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [{ loader: "css-loader", options: { importLoaders: 1 } }, "postcss-loader"]
})
}
]
},
plugins: [
new ExtractTextPlugin("styles.css"),
new PurgecssPlugin({
paths: glob.sync([
path.join(__dirname, "src/styles.css"),
path.join(__dirname, "index.html")
]),
extractors: [
{
extractor: TailwindExtractor,
extensions: ["html", "js"]
}
]
})
]
};
包.json
{
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=webpack.config.js",
"prod": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=webpack.config.js"
},
"devDependencies": {
"ajv": "^6.5.2",
"cross-env": "^5.1",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.2",
"postcss": "^6.0.14",
"postcss-loader": "^2.0.8",
"purgecss-webpack-plugin": "^1.2.0",
"style-loader": "^0.19.0",
"tailwindcss": "^0.6.4",
"webpack": "^3.8.1"
},
"dependencies": {
"glob-all": "^3.1.0"
}
}
任何帮助将不胜感激!!
最佳答案
您是否正在尝试使用 npm build
或 yarn build
编译您的代码?
如果您转到“使用 Tailwind 处理您的 CSS”下的 TailwindCSS 文档,那里有“将 Tailwind 与 PostCSS 结合使用”部分,并且有一个链接的模板存储库,您可以在其中查看如何完成。我看到的第一件事是你的入口点是你的 index.js 并且在模板 repo 中它的 ./src/styles.css
.
关于javascript - 使用 PurgeCSS、TailwindCSS 和 Webpack,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51603507/
阅读目录 。 原子化 CSS 框架 tailwindcss 介绍 样式智能提示插件 小结 回到目录 原子化 CSS 框架
我正在使用 NextJS 和 Tailwind CSS 来设计顶部导航栏。我希望更改事件链接的文本颜色。下面是我的代码: const Header = () => { return(
我想让字体大小响应,但它不适用于 font-awesome。 如何让 xl:fa-3x 在 tailwindcss 上运行? 谢谢 最佳答案 这是我的解决方案,您需要使用 tailwindcss r
我正在尝试重新创建一个从 vanilla CSS 到 tailwindcss 的元素。但是我尝试了很多选择,但都失败了。 这是 CSS 代码: header { background: lin
我在成功的身份验证中加载页面时会出现一条 flash 消息,我正在尝试弄清楚如何将它水平居中放置在任何设备上。我正在使用 TailwindCSS 来调整 div 的位置并尝试过 fixed和 abso
有没有办法为高度属性设置动画,这是我的简单代码,但高度不是动画它只是立即改变 { setSecond(!secondElement) }}> TITLE 1 2 最佳
我正在尝试创建一个 Fixed Navigation Bar在 Tailwind CSS和粘性滚动主页,但无论我尝试什么,我都无法让它工作...... 这是我取得的成就: 这是我的代码:
我有一个使用 Rails 5、Ruby 2.4 构建的网络应用程序。我使用 Tailwindcss 作为我的设计框架。 我有一张主图(下图),我在其中使用类似警报的顺风作为横幅来为新的网上商店做商品广
我正在使用 TailwindCSS - 实用程序类框架 - 为我的元素设置样式。尽管这更像是一个通用的 CSS 问题。 我无法定位盒子,所以它可以在不溢出的情况下获得剩余空间。这是我的真实状态:
所以我正在使用 Rails、Vue 和 TailwindCss 1.0+ 制作应用 目前我正在尝试为我的产品制作一个下拉菜单,但是当我点击下拉按钮时,包含我的元素的下拉菜单飞到了屏幕的边缘,而它应该在
所以我想知道如何在 TailWindCSS Config 中设置最大高度媒体断点。iPad Pro 因其宽度而被识别为笔记本电脑。也就是说,它们对于 Laptop CSS 来说太高了,让我的网站看起来
在 TailwindCSS 中,您可以指定这样的代码: 因此默认颜色为红色,在“sm”断点处为绿色,在“md”断点处为蓝色。 您可以将任何实用程序类分配给任何断点,方法是在断点前加上对应的字母和“:
我将 Vue3 与 TailwindCSS 结合使用,并希望创建一个带有动态 grid-cols-{n} 类的网格。我知道 TailwindCSS 默认最多支持 12 列,但我无法自定义主题,因为列数
我想知道是否有办法在设定时间后停止 tailwindcss 中的动画 10 秒后停止弹跳 我什么都试过了,还是找不到办法 Hello 我已经尝试了 duration-75 但动画不会停止 最佳
我正在尝试将 Tailwind 与 React 结合使用来显示背景图像。我的配置如下: const white_bg = require("../../assets/images/wave_light
我有一个 website使用 TailwindCSS 正确实现深色/浅色 UI。 我想知道是否有一种方法可以强制网站以暗模式加载,直到用户通过单击切换按钮专门打开亮模式。 为什么?因为我更喜欢网站在深
这就是我的问题的样子(见环): View Image 使用Chrome的inspector发现与--tw-ring-shadow有关。所以我尝试添加像 ring-0 和 ring-offset-0 这
我们有一个使用 TailwindCSS 的组件库 (VueJS),我们将把它作为私有(private) npm 包发布。我的问题是 我们如何在组件库中公开 tailwind.config.js,以便使
我想知道如何为特定的 xl 屏幕尺寸从现有的 div 中删除背景颜色?我想要这样的东西 background-color:unset,这可以用 tailwind.css 实现吗? 最佳答案 您可以
我一直在尝试用谷歌搜索这个,但我要么没有使用正确的术语,要么还没有人问过我的问题。 问题:有没有办法在 TailwindCSS 中堆叠响应式类?我想做的是改变类似的东西: class="grid ga
我是一名优秀的程序员,十分优秀!