Discover how to build reactive apps using Svelte and Tailwind. Gain insights into Svelte syntax, lifecycle events, and Tailwind styling. Delve into creating customizable components and user management systems.

Building Reactive Apps With Svelte + Tailwind.png

tarball.tar.gz

Svelte

Svelte is a popular JavaScript compiler for front-end developers who want to take their applications to the next level from React, make it slimmer with less code, and enable better performance. Tailwind is a utility-first CSS framework that has a single class for each CSS property. 

In this interactive course, you'll work with Svelte and Tailwind in real-world applications and build a user management system from scratch. You'll also learn the basic syntax of Svelte—templating, conditions, loops, and event listeners. Next, you'll build different customizable components and work with lifecycle events. You'll also learn to implement routing and many other things, such as sorting, filtering, modifying, or duplicating datasets. You'll also learn how Tailwind works, as well as how to style components using Tailwind directives. 

By the end of this course, you'll have a solid foundation to build your dream application in Svelte with Tailwind, and provide a slimmer, better performing web application for your users.

Building Reactive Apps with Svelte and Tailwind

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [svelte()],
  build: {
    outDir: 'build'
  }
})


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Svelte</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>


/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        './index.html',
        './src/**/*.{js,ts,svelte}'
    ],
    theme: {
        extend: {},
        colors: {
            black: '#222',
            light: '#F7F8F9',
            grey: '#A3A5AB',
            accent: '#FF3E00',
            primary: '#3498DB',
            success: '#27AE60',
        }
    },
    plugins: [],
}


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


import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


React

Dart

GoJS React

Typescript React

Vue.js

Learn how to modify the state of the application and update the UI accordingly.

Introduction

Getting Started with Svelte

Setting Up The Project

Building the List View

Building the Details View

Export and Import Data

Master Svelte and Tailwind

Conclusion

Appendix

Adding New Entries

Add the `Add` component

Master Svelte and Tailwind

Adding New Entries

Add the Add component

Add the `Add` component