标签: tailwind-css

在我更改了tailiwind.config.js. 之后编译就不行了。它抛出以下错误。

error - ./src/assets/styles/global.css:3:1
Syntax error: Unknown word

  1 | @import 'tailwindcss/base';
  2 | @import 'tailwindcss/components';
> 3 | @import 'tailwindcss/utilities';
    |                                                              ^
  4 | @import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
  5 | 
wait  - compiling...
error - ./src/assets/styles/global.css:3:1
Syntax error: Unknown word

  1 | @import 'tailwindcss/base';
  2 | @import 'tailwindcss/components';
> 3 | @import 'tailwindcss/utilities';
    |                                                              ^
  4 | @import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
  5 | 
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|/Users/Anjula/slinc-frontend/node_modules/next/dist/compiled/css-loader/cjs.js??ruleSet[1].rules[2].oneOf[6].use[1]!/Users/Anjula/slinc-frontend/node_modules/next/dist/compiled/postcss-loader/cjs.js??ruleSet[1].rules[2].oneOf[6].use[2]!/Users/Anjula/slinc-frontend/src/assets/styles/global.css': No serializer registered for CssSyntaxError
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems …

我有这个输出：

我想要做的是将这两个按钮置于顶部居中，并将“停止”按钮置于底部居中。

我对 TailwindCSS 还很陌生，我猜测我必须使用 flex，然后将项目集中在该 flex div 下方的 div 中。

现在这是我的代码：

<div class="space-y-0">
        <div class="bg-green-300  w-32 px-2 py-2 rounded-r-2xl mt-2 mr-2 mb-2 align-content-center">
            <img src="{% static 'sample/eko.jpg' %}" class="w-32 rounded-r-2xl">
            <div class="align-content-center text-center text-green-800">Eko S. W</div>
        </div>
        <div class="bg-blue-300 mr-2 w-32">
            <div class="p-2 flex content-start">
                <button>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="green">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 …

在这里，我在添加顺风 CSS 时遇到此错误。此处附有屏幕截图

  [https://i.stack.imgur.com/UC8NS.png][1]
package.json file
  "scripts": {
    "start": "npm run watch:css && react-scripts start",
    "build": "npm run watch:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "buid:css": "postcss src/assets/tailwind.css -o src/assets/main.css",
    "watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css"
  },

当我在这里创建反应应用程序时，出现错误。对于CSS，我使用顺风CSS。我做了几次更改。但错误是相同的。我该如何修复这个错误？

我正在尝试在 Vercel 上部署 NextJS 应用程序，但在部署时遇到以下错误。我也在使用 Tailwind CSS 框架。我不知道错误是什么以及如何纠正它。

我猜错误就在这里： 16:20:55.573 HookWebpackError: Expected a opening square arrow. 但我不确定。

16:20:00.163
Installing dependencies...
16:20:13.951
16:20:13.952
> @fortawesome/fontawesome-common-types@0.2.35 postinstall /vercel/path0/node_modules/@fortawesome/fontawesome-common-types
16:20:13.952
> node attribution.js
16:20:13.952
16:20:14.025
Font Awesome Free 0.2.35 by @fontawesome - https://fontawesome.com
16:20:14.026
License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
16:20:14.026
16:20:14.046
16:20:14.046
> core-js-pure@3.15.2 postinstall /vercel/path0/node_modules/core-js-pure
16:20:14.047
> node -e "try{require('./postinstall')}catch(e){}"
16:20:14.047
16:20:14.229
16:20:14.229
> @fortawesome/fontawesome-svg-core@1.2.35 postinstall /vercel/path0/node_modules/@fortawesome/fontawesome-svg-core
16:20:14.229
> node attribution.js
16:20:14.229
16:20:14.304 …

我发现这个顺风颜色适用于顺风 css 和材质ui 颜色。就像字体一样，它们的颜色从 100 - 900 到 A100 - 400 都有很好的命名。我认为直接在 scss 或 css 文件上使用它们会很好。我该怎么做/有我可以使用的导入文件吗？

我正在使用 Tailwind CSS 和 Tailwind UI。我想使用此页面上的第一个导航栏。上面说的Requires JS。Tailwind 默认提供 JavaScript 吗？如果是这样，我应该导入或使用哪个文件？

我在尝试隐藏一些顺风的 div 时遇到问题

我有两个 div，但都显示在桌面和移动设备中

Div 1：必须在桌面上显示并在移动设备上隐藏。

<div class="hidden md:block" style="margin-bottom":5px></div>

Div 2：必须在移动设备上显示并在桌面设备上隐藏：

<div class="hidden lg:block" style="margin-bottom":5px></div>

是否有任何内置或简单的方法可以使用TailwindCSS 中的网格布局为交替网格行设置唯一的背景颜色？

可以说我有一个看起来像这样的网格：

<div class="grid grid-cols-6 gap-4">
    <div class="col-span-6">Row 1</div>
    <div class="col-span-3">Row 2 A</div>
    <div class="col-span-3">Row 2 B</div>
    <div class="col-span-6">Row 3</div>
    <div class="col-span-2">Row 4 A</div>
    <div class="col-span-2">Row 4 B</div>
    <div class="col-span-2">Row 4 C</div>
</div>

有没有一种有效的方法可以将第 2 行和第 4 行的背景颜色设置为灰色 ( bg-gray-100)？我在文档中找不到任何内容，虽然我可以使用 Javascript 实现此目的，但我希望有一种仅使用 TailwindCSS 的更简单的方法。

我使用 larastarters 套件（https://github.com/LaravelDaily/Larastarters）作为业余项目来练习 Intertia、Vue 和 tailwindcss。如果用户单击以默认媒体首选项开始的按钮，我想设置暗模式。我使用 Vuex 从 localstorage 读取状态，一切似乎都正常，我可以成功地将类设置为 dark 到容器，但没有任何反应，而如果我绑定单个类，例如 bg-gray-800 ，则该类将被应用。我错过了一些东西，但我无法弄清楚。这是商店

import { createStore } from 'vuex'
import { getThemeFromLocalStorage, setThemeToLocalStorage } from '../utils/index.js'
// Create a new store instance.
export default createStore({
    state() {
        return {
            darkTheme: getThemeFromLocalStorage(),
        }
    },
    mutations: {
        toggleTheme(state) {
            state.darkTheme = !state.darkTheme;
            setThemeToLocalStorage(state.darkTheme);
        }
    }
});

组件：

<template>
  <button
    class="rounded-md focus:outline-none focus:shadow-outline-purple"
    @click="toggleTheme"
    aria-label="Toggle color mode"
  >
    <template v-if="!dark">
      <svg
        class="w-5 h-5"
        aria-hidden="true"
        fill="currentColor"
        viewBox="0 0 20 20"
      > …

这有效：

let players = [
    { id: 1, name: 'Player 1', color: 'amber' },
    { id: 2, name: 'Player 2', color: 'sky' },
];
...
<span class="underline decoration-{player.color}-500">{player.name}</span>

只是有时。在浏览器中检查页面源代码时，我可以看到该 prop 已正确应用于生成的 HTML 中的类：

但大多数时候颜色不会应用于下划线。当我将源 HTML 更改为静态颜色、保存文件，然后将其更改回来时，一条或两条下划线将停止工作。同样，当我更改 JavaScript 中的颜色时，通常另一种颜色会开始工作，但并非总是如此。这是由于竞争条件吗？我是否错误地使用了 Svelte，这可以解释这种看似随机的行为？