问题标签 [tailwind-css]

我正在努力让 Tailwind CSS 与 SASS 和 Webpack 一起工作。似乎tailwind的postcss配置在处理方面并没有真正做任何事情@tailwind preflight，@tailwind components并且@tailwind utilities

我的设置如下：

布局.scss

entry.js

postcss.config.js

webpack.config.js

当我运行 Webpack 时，一切运行良好，但内容/dist/main.css是：

@tailwind preflight;@tailwind components;@tailwind utilities;.my-class{@apply text-blue;@apply border-red}

我怀疑它与加载程序的（顺序）有关，但我似乎无法弄清楚为什么它没有得到正确处理。

有谁知道我在这里做错了什么？:-)

提前致谢。

我知道 Internet Explorer 不能很好地处理 SVG。我注意到当更改display: block为do 时display: flex会减小间隙的大小。但是它不会删除它。

我正在声明height和width样式，但问题似乎在 IE 11 中仍然存在

https://github.com/CityOfNewYork/ACCESS-NYC-PATTERNS/blob/master/src/objects/navigation/_navigation.scss

问题可能来自哪里？

我从 - https://tailwindcomponents.com/component/button-dropdown抓取了标记

并尝试使用 Codesandbox 实例应用相同的标记。

我更新了 tailwind.js 中的可见性模块，添加了 group-hover 变体。将鼠标悬停在按钮上不会显示 group-hover 所针对的元素。

我错过了什么？

https://codesandbox.io/s/2p9jj3wknr

我正在创建一个网页，它需要在一个页面中显示一些电影封面，而不是滚动它，因为它将显示。问题是我想让内容调整大小而不是使网页可滚动。我还需要支持 n 部电影（它们是依赖的）。我尝试过两次使用 flexbox，但它不起作用。另外，我正在使用tailwindcss框架，但我认为这不是问题，因为它只是类形式的css......

编辑：我添加了一个完整的示例（带有来自 unsplash 的示例图像）我希望它看起来像什么。

有没有机会改变它，或者我必须在 Tailwind 中使用移动优先的方法？

我有一个relativediv。在这个 div 中，我想将图像居中（所以狗的脸是可见的）。我怎么能这样做？

如何正确配置 Tailwind CSS 和 VS Code 以至少禁用 VueJS 单文件组件 (vue-cli) 中关于 at-rule 和空标记错误的错误？

我正在尝试为包括 tailwindcss v1 和 postcss-import 的 react-static 站点设置启动器。我无法获取构建或启动进程来解析 @import "tailwindcss/xxx" 指令。我使用 tailwindcss v0.7.4 得到相同的结果

这就是我所做的......

1. react-static create选择basic选项
2. yarn add tailwindcss@next
3. yarn add postcss-import
4. yarn tailwind init
5. 添加postcss.config.js
6. src/app.css用 3 个@import语句替换了的内容

我尝试了许多选择，例如从其他现有项目开始，更改@import参数。例如"../tailwindcss, "src/tailwindcss,"../src/tailwindcss等

基本上我所做的一切都没有改变错误，只是无法解析的文件名。

但是，还有 2 个额外的观察结果可能是相关的。首先，安装npx tailwind build src/styles.css -o src/app.css了 tailwind 并从styles.css.

其次，postcss-import 根本没有发生——改变它对结果没有影响。

错误信息是

我预计开发服务器会在源处理完毕后启动。

完整源代码可在https://gitlab.com/support96/my-static-site.git

我正在使用TailwindCSS（一个实用程序类框架）来设置我的元素的样式。尽管这更像是一个通用的 CSS 问题。

我无法定位该框，以便获得剩余空间而不会溢出它。这是我的实际状态：

输出（省略一些内部元素）：

如您所见，滚动条显示是因为 div 太大。为了看到盒子的botom，我必须向下滚动：

这是我想要的输出：

提前致谢。

小提琴

关联。

这是我开始的地方

预习

代码 ：

然后我试着让它更间隔开，就像这里的 codepen 示例所示： https ://codepen.io/codetimeio/pen/RYMEJe

但是每次我尝试添加一些填充和边距时，它都会转义到下一行，我无法弄清楚它为什么会这样做或如何阻止它

这是我更新的行：

这是我的顺风配置文件

我真的很想了解我做错了什么，以便我可以使用顺风作为我的主要模板框架

这是根据下面给出的答案更新的代码