Para configurar um projeto do zero usando React, Tailwind CSS e Shadcn, mas sem usar nenhum clichês pré-construídos como create-next-app ou create-react-app, você pode configurar manualmente a configuração usando Webpack ou outros empacotadores semelhantes. Abaixo está um guia para configurar isso com Webpack:

Etapa 1: inicializar um projeto npm

Crie um novo diretório de projeto e inicialize um novo projeto npm:

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

Etapa 2: instalar o React e as dependências

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

Etapa 3: instalar o Tailwind CSS

Instale o Tailwind CSS e suas dependências de pares:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Isso cria o arquivo tailwind.config.js.

Etapa 4: configurar o Webpack

Crie um arquivo webpack.config.js para configurar o Webpack:

touch webpack.config.js

Dentro de webpack.config.js, adicione o seguinte:

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

Etapa 5: configurar o Babel

Crie um arquivo .babelrc para configuração do Babel:

touch .babelrc

Dentro de .babelrc, adicione o seguinte:

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

Etapa 6: configurar CSS do Tailwind

Atualize seu arquivo tailwind.config.js para incluir os caminhos para seus componentes:

tailwind.config.js:

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

Etapa 7: configure a estrutura do seu projeto

Crie as pastas e arquivos necessários para seu aplicativo 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;

Etapa 8: Instale os componentes Shadcn

Agora que você tem a configuração básica, instale o pacote Shadcn e seus componentes. Instale os componentes Shadcn CLI e Tailwind para seu projeto React:

npx shadcn-init

Siga as instruções na tela para instalar os componentes e gerar a biblioteca Shadcn para o seu projeto.

Etapa 9: atualizar scripts npm

Atualize seu package.json para adicionar um script inicial para executar o servidor de desenvolvimento Webpack:

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

Etapa 10: inicie o servidor de desenvolvimento

Execute o servidor de desenvolvimento com:

npm start

Isso deve abrir seu aplicativo no navegador e você verá "Hello Shadcn!" estilizado com Tailwind CSS. Agora você pode continuar adicionando componentes Shadcn ao seu projeto React.

(Gerado com assistência de IA)