使用 react、tailwind css 和 shadcn 从头开始设置项目，但不使用任何预构建的样板，例如 create-next- app 或 create-react-app，您可以使用 webpack 或其他类似的捆绑器手动配置设置。以下是使用 webpack 进行设置的指南：
创建一个新的项目目录并初始化一个新的npm项目：
mkdir my-shadcn-app cd my-shadcn-app npm init -y
安装 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
安装 tailwind css 及其对等依赖项：
npm install -d tailwindcss postcss autoprefixer npx tailwindcss init
这将创建 tailwind.config.js 文件。
创建用于配置 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,
},
};
创建 .babelrc 文件用于 babel 配置：
touch .babelrc
在 .babelrc 中，添加以下内容：
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
更新 tailwind.config.js 文件以包含组件的路径：
/** @type {import('tailwindcss').config} */
module.exports = {
content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
theme: {
extend: {},
},
plugins: [],
};
为您的 react 应用程序创建必要的文件夹和文件：
mkdir src public touch src/index.jsx src/app.jsx src/index.css public/index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>my shadcn app</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
import react from 'react';
import reactdom from 'react-dom';
import app from './app';
import './index.css';
reactdom.render(<app />, document.getelementbyid('root'));
import react from 'react';
const app = () => {
return (
<div classname="p-6">
<h1 classname="text-3xl font-bold">hello shadcn!</h1>
</div>
);
};
export default app;
@tailwind base; @tailwind components; @tailwind utilities;
现在您已经完成了基本设置，请安装 shadcn 软件包及其组件。为您的 react 项目安装 shadcn cli 和 tailwind 组件：
npx shadcn-init
按照屏幕上的说明安装组件并为您的项目生成 shadcn 库。
更新 package.json 以添加启动脚本来运行 webpack 开发服务器：
"scripts": {
"start": "webpack serve --open"
}
使用以下命令运行开发服务器：
npm start
这应该在浏览器中打开您的应用程序，您将看到“hello shadcn！”使用 tailwind css 进行样式设置。您现在可以继续将 shadcn 组件添加到您的 react 项目中。
（人工智能辅助生成）
以上就是如何从头开始启动 Shadcn 项目的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
275
收藏
