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 or use one of their boilerplates available on Github.
# 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.
We'll be using the CodeSandbox Svelte playground alongisde the DaisyUI 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 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 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
Top comments (0)