How to setup a Svelte + TailwindCSS +DaisyUI development environment?

Purpose Of Project

In this post, we'll cover the setup for creating our Svelte environment in Vite with Tailwind CSS and DaisyUI integration.

Getting Started

To setup a basic Svelte app, you can run the following command:

npm init vite my-app -- --template svelte

...then go into our project folder on the terminal and install the following dependencies:

cd my-app 

# Install the dependencies...

npm install

...then start Rollup.

# Npm Command
npm run dev 

Navigate to localhost:8080 and you should see your app running. Edit a component file in src, save it, and reload the page to see your changes.

You should now see this in the browser!

Adding Tailwind CSS + DaisyUI Setup

So now we have to install Tailwind CSS and DaisyUI peer-dependencies via npm using the following command:

npm install -D tailwindcss postcss autoprefixer daisyui  

We will now create a tailwind configuration file called tailwind.config.cjs in the base directory.

Add the following code to your tailwind.config.cjs file:

module.exports = {
    content: ["./src/**/*.{html,js,svelte}"],  theme: {
    extend: {},
  },
  plugins: [
    require("daisyui")
  ],
}

Next, we'll have to create a PostCSS configuration file (postcss.config.cjs) in our base directory.

Add the following code to your postcss.config.cjs file:

module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    }
  }

Injecting Tailwind Directives into our CSS

It's best to inject them inside your App.svelte file so they're accessible on every page.

<style global lang="postcss">
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
</style>

Now that we have Tailwind in our environment, let’s edit our website header to see how tailwind works with Svelte.

You should now see this:

Conclusion

Now if you haven't used DaisyUI or TailWind components before then take a look at an example Svelte project I created with both DaisyUI and Tailwind integration.

You can view it right here!

Go here to view my completed template for this project on Github!

License: 📝

This project is under the MIT License (MIT). See the LICENSE for more information.

Contributions

Contributions are always welcome...

🔹 Fork the repository
🔹 Improve current program by
🔹 improving functionality
🔹 adding a new feature
🔹 bug fixes
🔹 Push your work and Create a Pull Request

Comments

[Andrew Baisden]

Even though I'm not a Svelte user this tutorial was easy to follow.