标签: tailwind-css

Lot of blogs and posts purport to create a "sticky footer" using Tailwindcss, but none that I can find thought about the case where there is more than a short "hello world" line of content:

For example in none of these examples does the footer "stick" if the main area is tall enough to scroll.

https://www.gomasuga.com/blog/creating-a-sticky-footer-with-tailwind

Tailwindcss: fixed/sticky footer on the bottom

https://medium.com/@milanchheda/sticky-footer-using-tailwind-css-1c757ea729e2

... and several codepen examples.

Is there a way with Tailwindcss to create a small footer that …

我正在构建一个 Next JS 网站并使用 JIT 运行 Tailwind。这是我的 tailwind.config.js：

  module.exports = {
  mode: "jit",
  purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  extend: {},
  plugins: [],
  };

问题是，每次我编写新代码时，我都必须重新启动服务器并运行“npm run dev”，因为它没有更新 http://localhost:3000/ 上的 CSS。

当我运行服务器时，我也会收到警告：

warn - You have enabled the JIT engine which is currently in preview.
warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.

有什么想法可能导致这种情况吗？谢谢！

我正在使用 NextJs 和 TailwindCSS 开发一个个人项目。

完成项目后，我使用私人导航器来查看进度，但似乎笔画没有按应有的方式工作，我在除 Chrome 之外的所有浏览器中都遇到了这种情况。

这是我得到的：

这是所需的行为：

代码：

<div className="outline-title text-white pb-2 text-5xl font-bold text-center mb-12 mt-8">
      Values &amp; Process
</div>

CSS：

.outline-title {
  color: rgba(0, 0, 0, 0);
  -webkit-text-stroke: 2px black;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

有人可以解释或帮助解决这个问题吗？

浏览器兼容性：

有人成功使用VueJS，PostCss和Tailwind在Storybook中进行组件开发来建立项目吗？

我已经走了这么远：

1. 新vue项目（vue-cli 3.0.5）
2. @ storybook / vue（4.0.0-alpha.25）
3. tailwindcss（0.6.5）
4. 使用创建组件 <style lang="postcss"> ... </style>
5. @apply在样式块内使用Tailwind 将实用程序类应用于组件

我遇到的问题是，lang="postcss"运行故事书时，在编译过程中我创建的要使用的故事的任何组件都会失败。

我尝试添加一个自定义webpack配置来停止错误，但我的所有组件均未设置样式。

const path = require('path')

module.exports = {
    module: {
        rules: [
            {
                test: /\.postcss$/,
                loaders: ["style-loader", "css-loader", "postcss-loader"],
                include: path.resolve(__dirname, '../')
            }
        ]
    }
}

我也尝试将我app.postcss的stories.js文件（导入顺风）导入文件本身无济于事。任何帮助，将不胜感激。

我使用 TailwindCSS 创建了一个 VueJS 按钮组件。我的目标是为该按钮组件提供一些基本样式（使用 tailwindcss 类），并在需要时选择覆盖它们（再次使用 tailwind css 类）。

例如，这是Button组件的简化版本：

// Button.vue

<template>
  <button class="bg-green-500 text-white py-2 px-4 rounded">
    Click Me
  </button>
</template>

这是我在另一个文件中使用该组件的示例：

// index.vue

<Button></Button>
<Button class="bg-red-600"></Button>
<Button class="bg-blue-600"></Button>

问题是这只能起到一半的作用。也就是说，bg-blue-600确实覆盖了bg-green-500我在Button.vue. 但bg-red-600也不能忽略的背景颜色（presumbably，因为bg-red-600来之前在CSS源代码。

因此，我想知道如何正确设置它？也就是说，我如何为Button组件提供一些基本样式（再次使用 tailwind css 类），同时还提供使用 tailwind css 类覆盖这些样式的选项。

谢谢。

我已经进行了 Prettier 设置，可以在 VSCode 中保存 CSS 文件时进行格式化。我在我的一个项目中使用 TailwindCSS 并使用1.7 中最新添加的内容，更漂亮地格式化文件并在单个冒号后添加一个空格，如下所示：

格式化前

.container {
  @apply flex;
  @apply flex-col;
  @apply lg:flex-row;
}

格式化后

.container {
  @apply flex;
  @apply flex-col;
  @apply lg: flex-row;
}

lg:在和之间添加一个空格flex-row。

有人知道如何解决这个问题吗？目前我只是忽略 CSS 文件来规避这个问题。

解决方案

Prettier 没有被选为 CSS 的默认格式化程序，仅适用于 TS 和 JS。将 CSS 的默认格式化程序更新为 Prettier 解决了这个问题。

尝试在我的 tailwindcss 样式页面中替换行颜色，下面的代码对我的 <tr> 没有影响：

<style>
    tr:nth-child(even) {
        class="bg-gray-50";
    }
    tr:nth-child(od) {
        class="bg-white";
    }
</style>

请问我错过了什么？

我有一个问题要问你们（和姑娘们；））

有谁知道 Tailwind CSS 的现有插件可以使字体大小响应（除了字体大小固定的下屏幕和​​上屏幕大小）。像那样：

body { font-size: calc(16px + (26 - 16) * ((100vw - 768px) / (1280 - 768))); }
@media screen and (max-width: 768px) { body { font-size: 16px; }}
@media screen and (min-width: 1280px) { body { font-size: 26px; }}

• 较低的屏幕宽度- 固定字体大小
• 屏幕尺寸介于两者之间- 响应式字体大小从16 像素到26 像素
• 更宽的屏幕宽度- 固定字体大小

我react-ts使用创建了一个新应用程序yarn create @vitejs/app my-app --template react-ts。

我使用安装了顺风yarn add --dev tailwindcss@latest postcss@latest autoprefixer@latest。

我初始化了顺风：npx tailwindcss init -p。

我设置from并to在postcss.config.js：

module.exports = {
  from: 'src/styles/App.css',
  to: 'src/styles/output.css',
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
}

我App.css在以下位置创建了一个文件src/styles：

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

根据https://vitejs.dev/guide/features.html#postcsspostcss-load-config ，允许任何有效的语法。from并且to 似乎是被允许的。

当我调用yarn devwhich本质上运行时vite，我的应用程序正在启动，没有构建错误，但未生成顺风输出。

我究竟做错了什么？

我想要一个输入文本框，其中只有占位符为斜体，但没有文本内容。

我知道我们可以使用普通的 css 来做到这一点，如下所示：

::-webkit-input-placeholder {
   font-style: italic;
}

但如何以顺风的方式做到这一点呢？