Så här sätter du upp ett Rails-projekt med Esbuild och TailwindCSS

Att sätta upp ett nytt Rails-projekt kan vara en spännande men ibland överväldigande uppgift, särskilt när du vill integrera moderna verktyg som Esbuild och TailwindCSS. I den här guiden kommer vi att gå igenom stegen för att skapa ett Rails-projekt som använder dessa kraftfulla verktyg för att förbättra din utvecklingsupplevelse och skapa vackra, responsiva användargränssnitt.

Vad är Esbuild och TailwindCSS?

Innan vi dyker in i installationsprocessen, låt oss kort gå igenom vad Esbuild och TailwindCSS är.

Esbuild

Esbuild är en extremt snabb JavaScript-bundler och minifierare. Den är designad för att vara snabb och effektiv, vilket gör den till ett utmärkt val för moderna webbutvecklingsprojekt. Med Esbuild kan du enkelt hantera JavaScript, TypeScript och CSS-filer, vilket gör det till ett perfekt komplement till Rails.

TailwindCSS

TailwindCSS är ett utility-first CSS-ramverk som gör det enkelt att bygga anpassade användargränssnitt. Istället för att skriva långa CSS-klasser, kan du använda små, återanvändbara klasser för att snabbt styla dina komponenter. Detta gör att du kan skapa responsiva och stiliga gränssnitt utan att behöva skriva mycket CSS-kod.

Steg för att sätta upp ditt Rails-projekt

Nu när vi har en grundläggande förståelse för vad Esbuild och TailwindCSS är, låt oss gå igenom stegen för att sätta upp ditt Rails-projekt.

1. Skapa ett nytt Rails-projekt

Först och främst behöver vi skapa ett nytt Rails-projekt. Öppna din terminal och kör följande kommando:

rails new myapp --skip-javascript

Vi använder flaggan --skip-javascript eftersom vi kommer att hantera JavaScript med Esbuild istället för Rails standardinställningar.

2. Navigera till projektmappen

Gå in i den nyss skapade mappen:

cd myapp

3. Installera Esbuild

För att installera Esbuild, lägg till det i din Gemfile. Öppna Gemfile och lägg till följande rad:

gem 'esbuild', '~> 0.14.0' # Kontrollera för den senaste versionen

Efter att ha lagt till gemmet, kör:

bundle install

Nästa steg är att installera Esbuild. Du kan göra detta genom att köra följande kommando:

bundle exec esbuild app/javascript/* --bundle --outdir=app/assets/builds

Detta kommando kommer att bundla dina JavaScript-filer och placera dem i app/assets/builds.

4. Installera TailwindCSS

Nu är det dags att installera TailwindCSS. För att göra detta, kör följande kommando:

yarn add tailwindcss postcss autoprefixer

Detta kommer att installera TailwindCSS och dess beroenden. Nästa steg är att initiera TailwindCSS genom att köra:

npx tailwindcss init

Detta skapar en tailwind.config.js fil i din projektmapp.

5. Konfigurera TailwindCSS

Öppna tailwind.config.js och lägg till följande konfiguration:

module.exports = {
  content: [
    './app/**/*.html.erb',
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Denna konfiguration talar om för TailwindCSS var den ska leta efter klasser som används i din kod.

6. Skapa en CSS-fil för Tailwind

Skapa en ny CSS-fil i app/assets/stylesheets och kalla den application.tailwind.css. Lägg till följande innehåll:

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

7. Importera CSS-filen i din JavaScript-fil

Öppna app/javascript/application.js och lägg till följande rad för att importera din TailwindCSS-fil:

import '../stylesheets/application.tailwind.css';

8. Bygg och kör din applikation

Nu är allt klart för att bygga och köra din applikation. Kör följande kommando:

bin/dev

Detta startar din Rails-server och du kan nu besöka http://localhost:3000 för att se din applikation i aktion.

Testa TailwindCSS

För att se att TailwindCSS fungerar korrekt, öppna app/views/layouts/application.html.erb och lägg till några TailwindCSS-klasser i <body>-taggen:

<body class="bg-gray-100 text-gray-900">

Du kan nu lägga till några komponenter i din vy för att se TailwindCSS i aktion. Till exempel, lägg till en enkel knapp:

<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded">Klicka här</button>

Sammanfattning

Grattis! Du har nu framgångsrikt satt upp ett Rails-projekt med Esbuild och TailwindCSS. Genom att använda dessa verktyg kan du skapa snabba och responsiva webbapplikationer med stiliga användargränssnitt. Kom ihåg att utforska TailwindCSS-dokumentationen för att lära dig mer om de olika klasserna och hur du kan anpassa dem för dina behov.

Lycka till med ditt nya projekt, och ha kul med att koda!