DEV Community

Cover image for Automate DaisyUI Setup in VS Code with One Command
Martin Flischman
Martin Flischman

Posted on

Automate DaisyUI Setup in VS Code with One Command

#tailwindcss #daisyui #vscode #githubcopilot

If you’re a beginner or indie web developer using Tailwind CSS and DaisyUI, setting up helpful features like autocomplete, IntelliSense, and docs access in VS Code can get repetitive. Here's a one-command setup to automate everything — clean, fast, and beginner-friendly.

🌍 Who This Is For

  • You use Tailwind CSS and DaisyUI in your projects
  • You use GitHub Copilot for fast autocomplete and want it to work seamlessly with DaisyUI classes
  • You value momentum over perfection and want to move fast

❓ What This Does

It creates a .vscode/settings.json file inside your project and adds a setting that permanently enables DaisyUI's color autocomplete suggestions. It also adds a simple daisyui.md note file as a reminder of what it does.

✅ The One-Time Setup (Takes 2 Minutes)

To automate this for any future project, we’ll create a reusable terminal alias.

1. Open your terminal and type:

code ~/.zshrc
Enter fullscreen mode Exit fullscreen mode

(or ~/.bashrc if you use Bash)

This opens your shell config file in VS Code.

2. Add this alias at the bottom:

alias setup-daisy='echo "{
  \"tailwindCSS.includeLanguages\": {\n    \"plaintext\": \"html\"\n  },\n  \"tailwindCSS.experimental.classRegex\": [\n    \"tw`([^`]*)\"\n  ],\n  \"tailwindCSS.emmetCompletions\": true\n}" > .vscode/settings.json && echo "This project is now setup for DaisyUI autocomplete in VS Code." > daisyui.md'
Enter fullscreen mode Exit fullscreen mode

Then save and close the file.

3. Back in terminal, run:

source ~/.zshrc
Enter fullscreen mode Exit fullscreen mode
  • This reloads your terminal so it knows about the new setup-daisy command.

🚀 How to Use It (Every New Project)

Next time you start a new project:

Create your project folder and cd into it

Run this:

setup-daisy
Enter fullscreen mode Exit fullscreen mode

That’s it. Your VS Code is now ready to give you DaisyUI suggestions in that project.

🔄 Version Warning

This setup works with the current version of DaisyUI. If DaisyUI changes its class structure or VS Code settings in future updates, you may need to update the script. Always check the official docs for latest recommendations.

📄 DaisyUI Reference

Link to source

🌟 Final Tip

If you're using GitHub Copilot to move fast, automating small setup steps like this helps it work better with your stack — and keeps you in flow.

Let me know if this helped you, or if you have a faster way to do it!

Top comments (0)