Encountering a hiccup while trying to install Svelte, Skeleton, and Tail

Recently entering the world of Svelte and TypeScript, I have encountered some unexpected errors after installation. Despite following the same steps as before, I am puzzled by what is causing these issues.

This is the process I followed:

npm create svelte@latest diceGame

cd diceGame

npm install

Following that, I integrated Skeleton:

npm i @skeletonlabs/skeleton --save-dev

The next step was adding Tailwind CSS:

npx svelte-add@latest tailwindcss

npm install

However, I am now facing errors as shown in the screenshot below:

I would greatly appreciate any advice or suggestions on achieving a smooth installation process.

typescriptnpmtailwind-csssvelteskeleton-ui

Answer №1

Check out the skeleton UI get started documentation.

I recently went through these steps multiple times and never encountered any issues.

npm create svelte@latest diceGame
cd diceGame
npm i
npm i -D @skeletonlabs/skeleton @skeletonlabs/tw-plugin
npx svelte-add@latest tailwindcss
npm i
npm add -D @types/node

Next, configure your Tailwind settings using a file with the .ts extension.

import { join } from 'path';
import type { Config } from 'tailwindcss';

// 1. Include the Skeleton plugin
import { skeleton } from '@skeletonlabs/tw-plugin';

const config = {
    // 2. Choose dark mode to be managed through classes
    darkMode: 'class',
    content: [
        './src/**/*.{html,js,svelte,ts}',
        // 3. Add the path to the Skeleton package
        join(require.resolve(
            '@skeletonlabs/skeleton'),
            '../**/*.{html,js,svelte,ts}'
        )
    ],
    theme: {
        extend: {},
    },
    plugins: [
        // 4. Add the Skeleton plugin (after other plugins)
        skeleton
    ]
} satisfies Config;

export default config;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring Angular component testing through jasmine/karma and utilizing the spyOn method

I have been facing an issue while trying to test my component. Even though the component itself works perfectly, the test keeps generating error messages that I am unable to resolve. Here is the snippet of code that I am attempting to test: export cl ...

javascriptangulartypescripttestingjasmine

The component 'ProtectRoute' cannot be utilized within JSX

While using typescript with nextjs, I encountered an issue as illustrated in the image. When I try to use a component as a JSX element, typescript displays the message: ProtectRoute' cannot be used as a JSX component. import { PropsWithChildren } from ...

reactjstypescriptnext.js

Error: The variable "prisma" is not defined in this context - Next.js version 14

While working with Prisma and next.js 14, I encountered an issue with the Stripe payment API. The error message ReferenceError: prisma is not defined popped up. How can I resolve this? import { NextApiRequest, NextApiResponse } from "next" import ...

typescriptnext.jsprisma

limitation on pairings of two generic types

How can I specify in TypeScript that "You can pass in any two objects, as long as their combination satisfies type X"? For example, consider the following function: function myFunction(options: {x: number, y: string}){ } Now, let's say we have anot ...

typescript

A guide to mocking Prisma using Jest mock functionality

Utilizing prisma for database interactions and eager to implement jest-mock to simulate the findMany call. https://jestjs.io/docs/jest-object#jestmockedtitem-t-deep--false brands.test.ts import { PrismaService } from "@services/mysql.service"; i ...

node.jstypescriptunit-testingjestjsprisma

Uncover the mystery behind the return value of a generic function in TypeScript

I can't seem to wrap my head around why TypeScript is behaving in the way described below. Snippet 01| const dictionary: { [key: string]: unknown} = {} 02| 03| function set<T>(key: string, value: T): void { 04| dictionary[key] = value; 05| } ...

typescript

Typescript Error: Trying to access a property that is undefined

I am a beginner in typescript and believe that the issue I am facing is related to typescript. Currently, I am working on an Ionic app where I have a function setwall() being called from home.html. The setwall() function is defined in home.ts. However, whe ...

angularcordovatypescriptcordova-pluginsionic3

ReactTS: Tips for organizing child components within a "container component"

Currently, I am in the process of developing reusable front-end components in React using Typescript. However, I am encountering a challenge related to a feature commonly found in traditional packages. My goal is to have the ability to nest children of a ...

reactjstypescriptchildrenreact-tsx

Angular2: Ensuring Sequential Execution Line by Line - A Comprehensive Guide

I have a designed an Angular2 Navbar Component that features a logout button: import { Component, OnInit } from '@angular/core'; import { LoginService } from '../login.service'; import { Router } from '@angular/router'; @Co ...

angulartypescript

Type-constrained generic key access for enhanced security

While attempting to create a versatile function that retrieves the value of a boolean property using a type-safe approach, I encountered an issue with the compiler not recognizing the type of my value. type KeyOfType<T, V> = keyof { [P in keyof T a ...

typescripttypescript-generics

Encountering a "ENOENT: no such file or directory" error while trying to run npm install in GitHub Action, although the same command works perfectly

Lately, I've been focused on transitioning from our current Drone CI setup to GitHub Actions. Here's the specific Action Workflow I've crafted in my .github/workflows/ci.yml file: on: [ push, pull_request ] name: CI jobs: test: runs ...

node.jsgithubnpmnpm-installgithub-actions

Utilizing TypeScript for enhanced Chrome notifications

I am currently developing a Chrome app using TypeScript (Angular2) and I want to implement push notifications. Here is the code snippet for my notification service: import {Injectable} from 'angular2/core'; @Injectable() export class Notificati ...

push-notificationtypescripttslint

The installation of Angular CLI through npm has unfortunately encountered an error

After following the steps from this post to remove the old installation, I encountered an issue during the last step: [sudo] npm uninstall -g @angular/cli [sudo] npm cache verify [sudo] npm install -g @angular/cli During the final step, I faced difficult ...

angularnpmangular-clinpm-install

Setting up popover functionality in TypeScript with Bootstrap 4

Seeking assistance with initializing popovers using TypeScript. I am attempting to initialize each element with the data-toggle="popover" attribute found on the page using querySelectorAll(). Here is an example of what I have tried so far: export class P ...

javascriptjquerytypescriptpopover

Unable to perform tests using the command "npm test"

I'm facing an issue with running a test file using npm. Here is the error message I am encountering... 00-IntroToCS/homework (master) $ npm test > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f686849386b6c7d8c ...

node.jsnpmnpm-install

utilizing tabview for component replacement

Having trouble changing components in Angular 7 with PrimeNG tabview tabs? Need some assistance? I have a setup with 3 components, and I want to switch between them when clicking on the panel inside the tabview. I've tried using onchange functions i ...

htmlangulartypescriptprimeng

Limit class generic to specify constructor argument type

I have a unique object that I need to transform into various structures based on its keys. Each key-value pair must be treated individually, so I intend to convert the object into an array of entries, then map those entries into policy objects and finally ...

typescripttypescript-generics

The value specified as type '{ value: BigNumber; }' cannot be assigned to the parameter type 'Overrides & { from?: string | Promise<string> | undefined; }'

I am currently working on a smart contract using Solidity (version 0.8.0) at my buildspace project. Below is a snippet of my code written in TypeScript (4.5.x)/JavaScript and Node.js 16.13.x: ... const waveContractFactory = await hre.ethers.getContractFact ...

typescriptethereumsoliditysmartcontractsethers.js

Tips on creating a file to specify the global npm packages for installation that match my preferences

Can I create a single file to list all the Node packages I want to install globally instead of manually running each command like this: npm install -g eslint npm install -g eslint-plugin-ramda ... ...

npm

`In TypeScript Angular, encountering challenges with accessing object properties`

My TypeScript object looks like this const playlist: { tracks: Array<Track> } = { tracks: new Array<Track>() }; This is the Track interface I am working with interface Track { title?: string; album?: string; artists?: string; duration? ...

javascriptangulartypescriptspotify