使用、Tailwind CSS 和Shadcn 從頭開始設定項目，但不使用任何預先建置項目的樣板，如create-next-app 或create-react-app，您可以使用Webpack 或其他類似的捆綁器手動配置設定。以下是使用 Webpack:

第 1 步：初始化 npm 項目

建立新的專案目錄並初始化新的npm專案：

mkdir my-shadcn-app
cd my-shadcn-app
npm init -y

步驟2：安裝React和依賴項

安裝React、ReactDOM、webpack和webpack-dev-server：

npm install react react-dom
npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin

第 3 步：安裝 Tailwind CSS

安裝Tailwind CSS及其對等依賴：

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

這將建立 tailwind.config.js 檔案。

第 4 步：設定 Webpack

建立用於設定Webpack的webpack.config.js檔案：

touch webpack.config.js

在 webpack.config.js 中，加入以下內容：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.jsx',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
  devServer: {
    static: './dist',
    hot: true,
  },
};

第 5 步：設定 Babel

建立 .babelrc 檔案用於 Babel 設定：

touch .babelrc

在.babelrc中，加入以下內容：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

第 6 步：設定 Tailwind CSS

更新 tailwind.config.js 檔案以包含元件的路徑：

tailwind.config.js：

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

第 7 步：設定項目結構

為您的 React 應用程式建立必要的資料夾和檔案：

mkdir src public
touch src/index.jsx src/App.jsx src/index.css public/index.html

公共/index.html：

src/index.jsx：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

ReactDOM.render(, document.getElementById('root'));

src/App.jsx：

import React from 'react';

const App = () => {
  return (
    

      
Hello Shadcn!
    
  );
};

export default App;

src/index.css：

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

第8步：安裝Shadcn組件

現在您已經完成了基本設置，請安裝 Shadcn 軟體包及其組件。為您的 React 專案安裝 Shadcn CLI 和 Tailwind 元件：

npx shadcn-init

請依照螢幕上的指示安裝元件並為您的專案產生 Shadcn 庫。

第 9 步：更新 npm 腳本

更新 package.json 以新增啟動腳本來執行 Webpack 開發伺服器：

"scripts": {
  "start": "webpack serve --open"
}

第10步：啟動開發伺服器

使用以下命令運行開發伺服器：

npm start

這應該會在瀏覽器中打開您的應用程序，您將看到“Hello Shadcn！”使用 Tailwind CSS 進行樣式設定。現在您可以繼續將 Shadcn 元件新增到您的 React 專案中。

（AI輔助生成）