我只是不知道这里出了什么问题,顺风从来没有在第一次尝试工作。In this screenshot shows that the html tag actually changes
我已经将我的global.css配置更改为
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
根据stackoverlow的这个答案,我也已经在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: [],
};
我还尝试执行以下命令npx tailwind-i tailwind.css -o ./layouts/styles.css --watch它找不到路径,然后我将其更改为npx tailwindcss -i build src/app/global.css -o public/styles.css,它说
[Error: EISDIR: illegal operation on a directory, read] {
errno: -4068,
code: 'EISDIR',
syscall: 'read'
}
无论如何,我正在使用pnpm命令,我确实尝试使用pnpm而不是npx与这两个命令,但仍然不起作用。最后一部分,下面是我的page.tsx代码:
'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>
);
}
我期待顺风css的作品,因为它的类已经反映到HTML标记时,我检查的元素。
2条答案
按热度按时间6kkfgxo01#
我不确定,但有三件事可以确保Tailwind工作:
@顺风基地;
@尾风组件;
@顺风公用事业;
导入'tailwindcss/tailwind.css'
hgtggwj02#
为了解决这个问题,我必须使用命令
npm run dev
和 *'run'**重新构建节点模块,它将rebuild,并注意到我们只是在现有的next js应用程序中安装了tailwind css。