为Sinatra项目添加TailwindCSS的方法问询（含SinatraRB与Sinatra 4+TailwindCSS 3.4场景）

Hey there! Great question—avoiding the npm/JS complexity is totally understandable, especially when working with a lightweight framework like Sinatra. Let’s break down the easiest ways to add Tailwind CSS 3.4 to your Sinatra 4 project, no npm required.

Option 1: Use the Tailwind CDN (Zero Setup, No Tools) #

This is the fastest way to get up and running—no downloads, no config files, just a single link in your layout.

1. Open your main layout file (usually views/layout.erb or similar)
2. Add the Tailwind CDN script and optional custom config inside the <head> tag:

<head>
  <!-- Tailwind CSS 3.4 CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
  
  <!-- Optional: Customize your Tailwind config right in the browser -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            brand: '#2563eb',
          },
          fontFamily: {
            sans: ['Inter', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <!-- Optional: Add custom utility classes -->
  <style type="text/tailwindcss">
    @layer utilities {
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
    }
  </style>
</head>

Pros:

• Zero setup time—copy-paste and you’re done
• No local tools or dependencies needed
• Perfect for quick prototypes or small Sinatra apps

Cons:

• Slightly slower in production (extra network request)
• Custom config runs client-side (minimal performance hit, but not ideal for large projects)

Option 2: Use Tailwind’s Standalone CLI (No npm, Compile Locally) #

If you want the performance benefits of compiled Tailwind (tree-shaken, minified CSS) without npm, the standalone CLI is your best bet. It’s a single binary file—no Node.js or npm required.

1. Download the Standalone CLI: Grab the binary for your OS (Windows, macOS, Linux) directly from the Tailwind website (no need for npm or Node).
2. Create a Tailwind config file: In your project root, make a tailwind.config.js file with this basic setup:

/** @type {import('tailwindcss').Config} */
module.exports = {
  // Tell Tailwind which files to scan for class names
  content: ["./views/**/*.{erb,haml,slim}", "./public/**/*.js"],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. Create a source CSS file: Make a src/styles.css file with these directives:

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

4. Compile your CSS:
   • For development (auto-recompile when files change):

     ./tailwindcss -i src/styles.css -o public/styles.css --watch
     

   • For production (minify and optimize):

     ./tailwindcss -i src/styles.css -o public/styles.css --minify
     

5. Link the compiled CSS in your layout:

<link rel="stylesheet" href="/styles.css">

Pros:

• Compiled CSS is tiny (only includes classes you actually use)
• Better performance for production apps
• Still no npm/Node.js required

Cons:

• Requires downloading a small binary file
• A few extra steps compared to the CDN

Quick Tips #

• For super small projects, stick with the CDN—it’s hard to beat the simplicity.
• If you’re building a production-ready app, the standalone CLI is worth the minimal setup for better performance.
• You can use either method with any Sinatra template engine (ERB, Haml, Slim, etc.)—just make sure the content array in your Tailwind config points to your template files.

备注：内容来源于stack exchange，提问作者Sig