标签: tailwind-css

所以我想知道如何在 TailWindCSS Config 中设置最大高度媒体断点。iPad Pro 因其宽度而被视为笔记本电脑。也就是说，它们对于笔记本电脑 CSS 来说太高了，让我的网站看起来很糟糕。

欢迎任何帮助，谢谢，贾斯汀。

我试图使扩展托盘在这里https://tailwindcss.com/docs/customizing-colors#color-palette-reference作为大纲工作

我已经安装了 tailwind，但只有默认颜色。

当我尝试添加;或不添加代码时，它不起作用。

我比意识到文件丢失了。

你怎么得到这个文件？我知道我有顺风工作，因为常规配色方案和所有其他功能都有效。我似乎无法让自定义颜色起作用，如果我能阻止它，我真的不想手动添加所有颜色，哈哈

我指的是这些扩展的

非常感谢任何帮助！:)

我正在使用带有 TailwindCSS 的 Laravel Jetstream。我已经根据我对项目的一些要求修改了一些 config.js 文件（webpack、tailwind 等）。出于某种原因，当我编译 running 时npm run dev，它将配置所有颜色（例如，bg-red-100, bg-red-200, bg-red-300...），但是当我在生产 ( npm run production) 中编译时，它缺少一些 ( bg-red-100, bg-red-400, bg-red-500...)。

webpack.mix.js：

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as …

如您所知，Tailwind 是一种非常流行的 PostCSS 解决方案。我想在运行版本 11.2.0 或旧版本的 Angular 应用程序中添加 TailwindCSS。我怎么能这样做？

我决定发布并回答我自己的问题，因为这是我最近在 Angular 社区看到的一个非常受欢迎的问题

我试图在某些情况下禁用提交按钮，但它不起作用。当我在浏览器中检查元素时，无论条件返回 true 还是 false，都会呈现这个元素。

在浏览器中呈现的元素

<button type="submit" disabled="" class="bg-yellow-500 text-white mt-4 disabled:bg-yellow-300 px-3 py-2 rounded-md">Submit</button>

代码

state = {
        formIsVaild: false
    }

render() {
    <button type="submit" disabled={!this.state.formIsVaild} className="bg-yellow-500 text-white mt-4 disabled:bg-yellow-300 px-3 py-2 rounded-md">Open Discussion</button>
}

我什至删除了条件并尝试了这个......

state = {
        formIsVaild: false
    }

render() {
    <button type="submit" disabled className="bg-yellow-500 text-white mt-4 disabled:bg-yellow-300 px-3 py-2 rounded-md">Open Discussion</button>
}

无论我传递给 disable 属性的值是什么，disabled=""get 都会在 HTML 中呈现。我什至尝试使用类型为 submit 的输入而不是按钮，我得到了相同的结果。我不确定这里发生了什么......有什么帮助吗？

最小的例子

import React, { Component } from 'react';

class FormData extends Component { …

我使用 Tailwind 设置了 Webpack，除了清除之外，一切似乎都运行良好。该文件为 4mb，我可以在其中看到所有的顺风实用程序类。在过去的 30 分钟里，我试图找到解决方案，但没有任何效果。

这是我的 package.json 脚本“build”和所有依赖项：

{
 "name": "MemeGenerator",
 "version": "1.0.0",
 "description": "",
 "private": true,
 "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1",
   "build": "webpack --config webpack.prod.js",
   "watch": "webpack --watch --config webpack.dev.js"
 },
 "repository": {
   "type": "git",
   "url": "git+https://github.com/MB9900/MemeGenerator.git"
 },
 "keywords": [],
 "author": "",
 "license": "ISC",
 "bugs": {
   "url": "https://github.com/MB9900/MemeGenerator/issues"
 },
 "homepage": "https://github.com/MB9900/MemeGenerator#readme",
 "devDependencies": {
   "autoprefixer": "^10.2.5",
   "css-loader": "^5.1.3",
   "html-webpack-plugin": "^5.3.1",
   "postcss": "^8.2.8",
   "postcss-cli": "^8.3.1",
   "postcss-loader": "^5.2.0",
   "style-loader": "^2.0.0",
   "tailwindcss": "^2.0.3",
   "webpack": "^5.26.0", …

在我当前的 NextJS 项目中，我使用 Tailwind 作为 CSS 框架。当我运行时yarn dev，一切正常，但是每当我运行yarn build后跟 a 时yarn start，我的所有 CSS 似乎都被清除了，因为我的页面布局完全不同。

前：

后：

我的 tailwind.config.js 文件：

    /* eslint-disable global-require */

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    screens: {
      sm: '640px',
      md: '768px',
      max_md: { max: '767px' },
      lg: '1024px',
      xl: '1536px',
    },
    colors: {
      primary: '#f2a53f',
      white: '#fff',
    },
    fontFamily: {
      title: ['Dancing Script', 'Times New Roman', 'sans-serif'], …

从官方文档中，我只能想出这样的东西：

<div class="grid grid-cols-2 gap-3">
  <div>1st col</div>
  <div>2nd col</div>
</div>

但这给了我 2 列宽度相等 - 我如何指定第一列将是总宽度的 20%（我只需要在那里放置一个简单的图标），其余的宽度将是第二列（这里会有一段文字）？

先感谢您。

我尝试@headlessui/vue在我的nuxt项目中安装。

当我尝试使用它时：

<template>
  <Menu>
    <MenuItems>
      <MenuItem>Item</MenuItem>
    </MenuItems>
  </Menu>
</template>

<script lang="ts">
import Vue from 'vue'
import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue'

export default Vue.extend({
  components: { Menu, MenuButton, MenuItems, MenuItem },
  data () {
    return {
      isScrolling: false
    }
  },
....

编译时出现类型错误

TypeError
vue.defineComponent is not a function

我正在使用带有 Tailwind CSS 的 Vue 3 开发 Web 应用程序。我的构建失败并发现了这 2 个错误。

我寻找答案并找到了https://github.com/tailwindlabs/tailwindcss/issues/861和https://github.com/tailwindlabs/tailwindcss/issues/2810。但两者都不适合我。我尝试升级npm install tailwindcss@latest postcss@latest autoprefixer@latest，但事情变得更加疯狂。

我恢复了它，但现在我什至无法运行我的开发服务器并收到相同的错误。有人可以帮忙吗？

这是我的package.json现在

{
  "name": "my-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@tailwindcss/postcss7-compat": "^2.0.2",
    "autoprefixer": "^9",
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "dayjs": "^1.10.5",
    "postcss": "^7",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
    "vue": "^3.0.0",
    "vue-i18n": "^9.1.6",
    "vue-router": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0", …