为何Next.js同时安装TypeScript与JavaScript？如何创建无JS文件的TS+Tailwind项目？

1. 为何Next.js会同时存在TypeScript与JavaScript文件？ #

• 你使用的with-tailwindcss官方示例模板本身就自带几个JavaScript配置文件，比如postcss.config.js、tailwind.config.js。这类工具链配置文件目前普遍用JS编写，一是因为它们不需要TypeScript的类型校验，用JS更轻便；二是相关工具对JS配置的支持更成熟稳定。
• Next.js的TypeScript模式支持混合开发，哪怕你加了--typescript参数，它也不会强制把所有文件转成TS，而是允许两种文件共存，方便开发者做渐进式迁移，或者保留必要的JS配置文件。

2. 如何创建仅含TypeScript和Tailwindcss的Next.js项目？ #

方法一：转换现有项目的配置文件为TS格式 #

1. 把项目里的postcss.config.js重命名为postcss.config.ts，替换内容为：

   import type { Config } from 'postcss'
   
   const config: Config = {
     plugins: {
       tailwindcss: {},
       autoprefixer: {},
     },
   }
   
   export default config
   

2. 把tailwind.config.js重命名为tailwind.config.ts，替换内容为：

   import type { Config } from 'tailwindcss'
   
   const config: Config = {
     content: [
       './pages/**/*.{js,ts,jsx,tsx,mdx}',
       './components/**/*.{js,ts,jsx,tsx,mdx}',
       './app/**/*.{js,ts,jsx,tsx,mdx}',
     ],
     theme: {
       extend: {},
     },
     plugins: [],
   }
   
   export default config
   

3. 删除原来的.js配置文件，确认所有业务文件都是.ts或.tsx格式即可。

方法二：从纯TS项目开始手动配置Tailwindcss #

1. 创建纯TypeScript的Next.js项目：

   npx create-next-app --typescript my_project
   

2. 安装Tailwindcss相关依赖：

   npm install -D tailwindcss postcss autoprefixer
   

3. 直接生成TS格式的配置文件：

   npx tailwindcss init -p --ts
   

4. 在globals.css里添加Tailwind的基础指令：

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

5. 最后在页面组件里测试使用Tailwind样式即可，整个项目不会有多余的JS文件。

内容的提问来源于stack exchange，提问作者Mintee