Installing Tailwind via CDN and NPM

Tailwind CSS can be installed in multiple ways based on your project type and workflow. The two most popular methods are using a CDN (quick & simple) or installing via NPM (powerful & customizable).

1. Using CDN (Quick Setup)

This is ideal for quick experiments or small static projects. Just include this CDN link in your HTML:

<script src="https://cdn.tailwindcss.com"></script>

You can also customize Tailwind using the CDN’s tailwind.config like this:

<script>
    tailwind.config = {
        theme: {
            extend: {
                colors: {
                    primary: '#1E40AF',
                }
            }
        }
    }
</script>

2. Using NPM (Recommended for Production)

NPM installation gives you full control, custom builds, and enables features like PurgeCSS. Here's how to set it up:

Initialize your project:
```
npm init -y
```
Install Tailwind via NPM:
```
npm install -D tailwindcss
```
Create config files:
```
npx tailwindcss init
```

Create a CSS file and include Tailwind directives:

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

Build your CSS using Tailwind CLI:

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Now link your output.css file in your HTML and you're ready to go!

Conclusion

Use the CDN for quick testing and learning. For real-world projects, always prefer the NPM setup to unlock Tailwind’s full potential and customization power.

← Previous: Tailwind vs Bootstrap vs Custom CSS Next: Tailwind CLI and Configuration File →