Get Started with Taco Svelte

Taco Svelte is a free and open-source components library for using Tailwind CSS.

Installation

Learn how to use @ct-taco/svelte components from this documentation to quickly and easily create elegant and flexible pages using Tailwind CSS.

@ct-taco/svelte is working with Tailwind CSS classes and you need to have Tailwind CSS installed on your project - Tailwind CSS Installation.

Using NPM

Install @ct-taco/Svelte as a dependency using NPM by running the following command:

npm i @ct-taco/svelte

Icons

You can use font awesome font family for the project by following their installation guide - Font Awesome Installation.

TailwindCSS Configurations

Once you install @ct-taco/svelte you need to wrap your tailwind css configurations with the withMT() function coming from @material-tailwind/vue/utils (installed automatically by installing this package)

        
const  withMT = require("@material-tailwind/html/utils/withMT");
 
module.exports = withMT({
  content: ["./src/**/*.{html,js,svelte,ts}",
       "node_modules/@ct-taco/vue/**/*.{js,jsx,ts,tsx,svelte}",
  ],
  theme: {
       extend: {}
  },
  plugins: [],
});
  
  

Vite Configurations

This is how your vite configurations file should look like

        
import { defineConfig } from "vite";
import { sveltekit } from "@sveltejs/kit/vite";
import  path  from "path";
 
export default defineConfig({
    plugins: [sveltekit()],
    resolve: {
        alias: {
            "@": path.resolve("./src/"),
        },
    },
});
  
  

Example

Now you're good to go and use @ct-taco/svelte in your project.

<Button 
    color="blue" 
    ripple="light"
>
    Click me
</Button>