Question

I just don t know what went wrong here, the tailwind never works at the first try. In this screenshot shows that the html tag actually changes

我已经将我的全球组合改为这一组合。

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

根据这一回答,stackover 。我还在<代码>tailwind.config.js中增加了一些内容。

/** @type {import( tailwindcss ).Config} */
module.exports = {
  **content: [
      "./pages/**/*.{js,ts,jsx,tsx,mdx}",
      "./components/**/*.{js,ts,jsx,tsx,mdx}",
      "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],**
  mode: "jit",
  theme: {
    extend: {
      fontFamily: {
        inter: ["Inter", "sans-serif"],
      },
      colors: {
        "black-100": "#2B2C35",
        "primary-blue": {
          DEFAULT: "#2B59FF",
          100: "#F5F8FF",
        },
        "secondary-orange": "#f79761",
        "light-white": {
          DEFAULT: "rgba(59,60,152,0.03)",
          100: "rgba(59,60,152,0.02)",
        },
        grey: "#747A88",
      },
      backgroundImage: {
         pattern : "url( /pattern.png )",
         hero-bg : "url( /hero-bg.png )"
      }
    },
  },
  plugins: [],
};

Also I was trying to do this command npx tailwind -i tailwind.css -o ./layouts/styles.css --watch it can t find the path, and then i changed it to npx tailwindcss -i build src/app/global.css -o public/styles.css and it says

[Error: EISDIR: illegal operation on a directory, read] {
  errno: -4068,
  code:  EISDIR ,
  syscall:  read 
}

不管怎么说,我还是用平时的指挥,而且我确实试图使用平时,而不是用上风,但都没有工作。最后一部分是我的网页。 ts:

 use client 

import React from  react ;

export default function Home ()  {
  return (
    <div className="text-center mt-8">
     <h2 className= text-2xl font-semibold >Hello brow</h2>
    </div>
  );
}

我期望尾窗能够发挥作用,因为当我检查这个部件时,尾窗已经反映到超文本标签上。

Answer 1

我不敢肯定,但确保Tailwind工程的三个方面是:

Global.css need

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

_app.js

import tailwindcss/tailwind.css

tailwind config

module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
 
    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        git: {
          50: "#c778dd33",
          100:  #c778dd ,
        },
      }
    },
  },
  plugins: [],
}

友情链接