63 lines
1.8 KiB
Nix
63 lines
1.8 KiB
Nix
{ pkgs ? import <nixpkgs> {} }:
|
|
|
|
pkgs.mkShell {
|
|
buildInputs = with pkgs; [
|
|
# Node.js and package managers
|
|
nodejs_20
|
|
nodePackages.npm
|
|
nodePackages.yarn
|
|
|
|
# Utilities
|
|
git
|
|
curl
|
|
wget
|
|
|
|
# Optional: Additional helpful tools
|
|
direnv # Environment management
|
|
nodePackages.prettier # Code formatting
|
|
nodePackages.eslint # Linting
|
|
];
|
|
|
|
shellHook = ''
|
|
echo "React + Tailwind development environment"
|
|
echo "Node version: $(node -v)"
|
|
echo "npm version: $(npm -v)"
|
|
|
|
# Automatically set up a new project if package.json doesn't exist
|
|
if [ ! -f package.json ]; then
|
|
echo "No package.json found. Would you like to initialize a new React + Tailwind project? (y/n)"
|
|
read response
|
|
if [ "$response" = "y" ]; then
|
|
# Create React project with Vite
|
|
npm create vite@latest . -- --template react
|
|
|
|
# Install dependencies
|
|
npm install
|
|
|
|
# Install Tailwind CSS and its dependencies
|
|
echo "Installing Tailwind CSS..."
|
|
npm install -D tailwindcss postcss autoprefixer
|
|
|
|
# Initialize Tailwind config
|
|
echo "Initializing Tailwind configuration..."
|
|
npx tailwindcss init -p
|
|
|
|
# Update src/index.css with Tailwind directives
|
|
echo "Updating CSS with Tailwind directives..."
|
|
if [ -f src/index.css ]; then
|
|
cat > src/index.css << 'EOL'
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
EOL
|
|
echo "Tailwind CSS directives added to src/index.css"
|
|
else
|
|
echo "Warning: src/index.css not found. You'll need to manually add Tailwind directives."
|
|
fi
|
|
|
|
echo -e "\nSetup complete! Start your development server with: npm run dev"
|
|
fi
|
|
fi
|
|
'';
|
|
}
|