问题标签 [tailwind-css]

第一次使用 laravel mix，我确定我错过了一些简单的东西。

我有一个项目，我正在尝试使用 Laravel mix 编译 tailwindcss，然后使用 purge 删除任何未使用的 css。

包.json

webpack.mix.js：

当我运行 npm run prod 时，一切似乎都正常工作。然而，在导出的 styles.css 中，唯一的样式来自 tailwind/base

样式.css

我的 templates/index.twig 文件中的所有类都没有添加，./components/shared.css 文件中的样式也没有添加。

类同时存在于 index.html 和 shared.css 中，因此不应被清除

当我删除 purgeCSS时，输出 css 文件包含预期的所有内容。但是，当在唯一的输出中添加 purge 时，tailwind/base css 。

请指教。

这是我的目录结构的屏幕截图

我正在尝试在我的 sass 文件中使用 @apply，并在我执行 npm run dev 或 npm run watch 时在标题中出现错误。我正在使用 Laravel，并使用 Laravel Mix。这是我的 webpack.mix.js

这存在于我的 app.css

我的 app.scss：

我昨天工作了一整天，完成了一个谷歌云功能，为预约者 vue 组件提供动力。最后一步实际上是使用返回对象的 UI。我计划使用带有允许日期和时间的 vuetify 日期/时间选择器。

在今天花费大量时间尝试将 vuetify 添加到现有项目以仅将其用于组件之后，它会导致来自 main.sass 的某些类（边距等）出现样式错误。

我想为顺风添加一个前缀，但我没有时间或意愿返回我的所有组件和文件以将前缀添加到我的所有顺风类。

我可以做些什么来确定 vuetify 类/css 的范围，以免在我尝试使用的两个组件之外引起问题？

我可以在编译和组装顺风之后添加 vuetify css，以便顺风类获胜优先吗？

我没有要显示的代码，因为它相当简单。我认为谷歌日历 API 将是这个组件中最难的部分，但事实证明它更容易。

I'm working on a process similar to the one described in https://nystudio107.com/blog/a-better-package-json-for-the-frontend but want to modify it to be able to compile different SCSS files to CSS files of the same name, e.g. fileA.scss compiles to fileA.css.

What I have at the moment works fine if I'm just working with one SCSS file master.scss compiling to site.combined.min.css.

From package.json

And the Gulp tasks

You can see I've replaced the 3rd line of the scss task so that it will deal with multiple sources and output multiple files to the build folder.

But what I'm getting stuck on is how does the tailwind task then know to use the file with the same name as used in the scss task and when it gets to the css task, how does it know not to use all the CSS files in the build folder, but only the one used in the previous tasks?

Is there a way of passing the file name to be used from one task to the next? Or should it be done a different way?

是否有顺风 CSS 的过渡持续时间类？例如，有没有办法在这个示例 div 上添加过渡持续时间？

我想尝试 Tailwind CSS，但在启动“npm run build”时遇到了问题。控制台返回：未找到尾风命令。但是我成功安装了它。

我升级 Node 和 npm。

此错误消息：

OnePage@1.0.0 build /Users/ted/Documents/Dweb/HTML : CSS/Projets/OnePage tailwind build src/css/tailwind.css -o dist/css/tailwind.css

这是我的错误日志：

如果它以 ok 结尾，它会起作用的信息

1 详细的 cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'build' ] 使用 npm@6.9.0 的信息

3 使用 node@v12.4.0 的信息

4个详细的运行脚本['prebuild'，'build'，'postbuild']

5 info 生命周期 OnePage@1.0.0~prebuild: OnePage@1.0.0

6 info 生命周期 OnePage@1.0.0~build: OnePage@1.0.0

7 冗长的生命周期 OnePage@1.0.0~build: unsafe-perm in lifecycle true

8 详细生命周期 OnePage@1.0.0~build: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/ted/Documents/Dweb/HTML : CSS/Projets /OnePage/node_modules/.bin:/Library/Frameworks/Python.framework/Versions/3.7/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin

9 详细生命周期 OnePage@1.0.0~build: CWD: /Users/ted/Documents/Dweb/HTML : CSS/Projets/OnePage

10 傻生命周期 OnePage@1.0.0~build: Args: [ 10 傻生命周期
'-c',

10 愚蠢的生命周期 'tailwind build src/css/tailwind.css -o dist/css/tailwind.css' 10 愚蠢的生命周期]

11 info 生命周期 OnePage@1.0.0~build：无法执行构建脚本 12 详细堆栈错误：OnePage@1.0.0 构建：tailwind build src/css/tailwind.css -o dist/css/tailwind.css

12 详细堆栈生成 ENOENT

ChildProcess 的 12 个详细堆栈。（/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:48:18）

ChildProcess.emit (events.js:200:13) 的 12 个详细堆栈

MaybeClose 的 12 个详细堆栈 (internal/child_process.js:1021:16)

Process.ChildProcess._handle.onexit (internal/child_process.js:283:5) 的 12 个详细堆栈

13 详细 pkgid OnePage@1.0.0

14 详细 cwd /Users/ted/Documents/Dweb/HTML : CSS/Projets/OnePage

15 详细的达尔文 18.6.0

16 详细 argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"

17 详细节点 v12.4.0

18 详细的 npm v6.9.0

19 错误文件 sh

20 错误代码 ELIFECYCLE

21 错误 errno ENOENT

22 错误系统调用产生

23 错误 OnePage@1.0.0 构建：tailwind build src/css/tailwind.css -o dist/css/tailwind.css

23 错误生成 ENOENT

24 错误 OnePage@1.0.0 构建脚本失败。

24 错误 这可能不是 npm 的问题。上面可能有额外的日志输出。25 详细退出 [ 1, true ]

我正在将 Tailwind 集成到当前正在使用 Bootstrap 的现有项目中。该代码库目前支持两个具有不同主题的不同站点。我正在努力寻找一种惯用的方式来提供特定于单个组件的主题样式，而不是更通用的主题，这显然已经得到 Tailwind 的很好支持。

例如，要为两个主题中具有不同背景颜色的导航栏组件设置样式，我只需在每个站点的主题配置中添加一个字段，其中包含特定于该组件的样式，并通过插件添加这些样式。

所以我的配置文件可能包含如下内容：

这没关系，但随着时间的推移，随着越来越多的组件被添加，所需的样板数量感觉有点麻烦。我想知道是否有更规范的方式来做到这一点？

显然，使用标准颜色主题并从组件插件中选择颜色会很好，但这对于这个用例来说不太可行，因为我希望最大限度地减少样式更改。

我想点击阅读更多按钮并将其推到这张卡片的底部。有相当于align-content:space-betweenforflex-col吗？顶部、中段和查看更多按钮都在自己的div中包裹在父卡div里面。

我正在寻找一种解决方案，将 Tailwind PostCSS 插件（与 purgecss 插件结合使用）生成的大 CSS 文件拆分为多个 CSS 文件（每个消费者 JS 文件一个 CSS 文件）。可以通过查看 JS 文件中使用的选择器（即类名，如 p-1 和 m-1）来检测 JS 文件使用的 CSS 规则。

知道如何实现这一目标或类似的东西吗？

我无法弄清楚为什么顺风的响应覆盖在我的项目中不起作用。

例如，我希望 div 中的以下文本在小屏幕断点下方居中并在 sm 断点上方左对齐。当我在Codepen中尝试以下代码时，它似乎可以工作。但是，它在我的 laravel 项目中不起作用。

任何想法为什么这在我的 Laravel 项目中不起作用？