Tailwind CSS + Svelte + DaisyUI - Responsive Front-End Components. Ep. 1
Tags: svelte, tailwindcss, beginners, tutorial
Published: 2022-05-31 14:19:13

To follow along with this tutorial, you’ll need the following: 

- Basic understanding of HTML, CSS and JavaScript.
- Basic knowledge of Tailwind CSS and utility classes.

## Getting Started

Go ahead and initialise our new project using the Svelte playground from [CodeSandbox](https://codesandbox.io/?from-app=1) or use one of their boilerplates available on [Github](https://github.com/sveltejs).  

```
# Creating a new project
npx degit sveltejs/template 

# Install the dependencies...
npm install
```

...then start Rollup.

```
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.

## DaisyUI + TailWind CSS Setup 

Now if you haven't used DaisyUI or TailWind components before then I'll highly recommend you look at their [docs](https://tailwindcss.com/docs/configuration). 

We'll be using the CodeSandbox Svelte playground alongisde the DaisyUI [CDN](https://daisyui.com/docs/cdn/) without having to install anything. 

Grab the following code

```
# Method: Just add one of these to the head tag of your HTML.

<link href="https://cdn.jsdelivr.net/npm/daisyui@2.15.2/dist/full.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
```
...and add one of these to the head tag of your HTML.

Next step is to prepare our `App.Svelte` file with the following structure. 

```
<script>
<!-- JavaScript Logic -->
</script>

<style>
<!-- CSS Styles -->
</style>

<!-- HTML Markup -->
```
Inside our App component, the code contains three main sections which are optional.

- A `<script>` block which contains JavaScript that runs when a component instance is created.
-  A `<style>` block that will be scoped to that component.
-  A `<main>` block which contains our App's template. 

## App Component

Inside of your `App.svelte` file, add the following code inside your <main></main> tags:

```
<section class="text-gray-600 body-font">
  <div class="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
	<div class="lg:max-w-lg lg:w-full md:w-1/2 w-5/6 mb-10 md:mb-0">
	  <img class="object-cover object-center rounded" alt="hero" src="https://api.lorem.space/image/game?w=720&h=900&hash=8B7BCDC2">
	</div>
	<div class="lg:flex-grow md:w-1/2 lg:pl-24 md:pl-16 flex flex-col md:items-start md:text-left items-center text-center">
	  <h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium uppercase text-white-900">Netflix Watch 
		<br class="hidden lg:inline-block">Party
	  </h1>
	  <p class="mb-8 leading-relaxed">Copper mug try-hard pitchfork pour-over freegan heirloom neutra air plant cold-pressed tacos poke beard tote bag. Heirloom echo park mlkshk tote bag selvage hot chicken authentic tumeric truffaut hexagon try-hard chambray.</p>
	  <div class="flex justify-center">
		<button class="btn btn-primary inline-flex text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg">Button</button>
		<button class="btn btn-accent btn-outline ml-4 inline-flex text-gray-700 border-0 py-2 px-6 rounded text-lg">Button</button>
	  </div>
	</div>
  </div>
</section>
```
In the code above, we created an Section element; inside our div element, we initialized an imgURL, which contains the URL for the placeholder image on our browser. Next, we've used customized styles on our hero image: hero title, hero text and buttons to complete our home section using Tailwind CSS classes. 

## Recap

If you followed along then you should have completed the tutorial and finished off your App component.

Now if you made it this far, then I am linking the code to my completed [Sandbox](https://jnin72.csb.app/) for you to fork or clone and then the job's done.

## 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

## Useful Resources
https://sveltestrap.js.org/
https://github.com/sveltejs/template
https://lorem.space/
https://daisyui.com/
https://tailwindcss.com/
https://github.com/rosstopping/tailwindcss-templates