有没有办法在nextjs中同时配置tailwind和typescript?

b5lpy0ml  于 2023-04-13  发布在  TypeScript
关注(0)|答案(2)|浏览(118)

npx create-next-app -e with-tailwindcss my-project
这似乎只会使顺风

npx create-next-app -ts

这仅配置类型脚本
npx create-next-app -e with-tailwindcss my-project -ts
这个dosent似乎工作

cbeh67ev

cbeh67ev1#

恐怕现在没有这样的模板,我建议你初始化这两个模板,然后手动复制所需的文件(tailwind.configpostcss.config等)从顺风文件夹到typescript文件夹。

vql8enpb

vql8enpb2#

添加顺风css你只需要遵循几个步骤
步骤1:安装依赖项

npm install tailwindcss postcss autoprefixer
npx tailwindcss init

步骤2:配置postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

步骤3:配置tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

第4步:将此样式添加到css文件

/* styles/globals.css */

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

搞定了
要了解详细信息,请检查此https://romik-mk.medium.com/configure-tailwind-css-in-next-js-c91e2c859463

相关问题