Para configurar un proyecto desde cero usando React, Tailwind CSS y Shadcn, pero sin usar ningún plantillas prediseñadas como create-next-app o create-react-app, puede configurar manualmente la configuración usando Webpack u otros paquetes similares. A continuación se muestra una guía para configurar esto con Webpack:

Paso 1: inicializar un proyecto npm

Cree un nuevo directorio de proyecto e inicialice un nuevo proyecto npm:

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

Paso 2: instalar React y dependencias

Instalar React, ReactDOM, webpack y 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

Paso 3: Instale Tailwind CSS

Instalar Tailwind CSS y sus dependencias de pares:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Esto crea el archivo tailwind.config.js.

Paso 4: configurar el paquete web

Cree un archivo webpack.config.js para configurar Webpack:

touch webpack.config.js

Dentro de webpack.config.js, agregue lo siguiente:

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,
  },
};

Paso 5: configurar Babel

Crear un archivo .babelrc para la configuración de Babel:

touch .babelrc

Dentro de .babelrc, agrega lo siguiente:

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

Paso 6: Configurar Tailwind CSS

Actualice su archivo tailwind.config.js para incluir las rutas a sus componentes:

viento de cola.config.js:

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

Paso 7: configure la estructura de su proyecto

Crea las carpetas y archivos necesarios para tu aplicación React:

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

público/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;

Paso 8: Instale los componentes de Shadcn

Ahora que tienes la configuración básica, instala el paquete Shadcn y sus componentes. Instale los componentes Shadcn CLI y Tailwind para su proyecto React:

npx shadcn-init

Siga las instrucciones que aparecen en pantalla para instalar componentes y generar la biblioteca Shadcn para su proyecto.

Paso 9: actualice los scripts de npm

Actualice su paquete.json para agregar un script de inicio para ejecutar el servidor de desarrollo Webpack:

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

Paso 10: inicie el servidor de desarrollo

Ejecutar el servidor de desarrollo con:

npm start

Esto debería abrir tu aplicación en el navegador y verás "¡Hola Shadcn!" diseñado con Tailwind CSS. Ahora puedes continuar agregando componentes Shadcn a tu proyecto React.

(Generado con asistencia de IA)