Setup SvelteKit#

To add Tinka UI to a working setup of SvelteKit, do the following steps.

Update Svelte.config.js file to enable PostCSS preprocessing.#

/** @type {import('@sveltejs/kit').Config} */
const config = {
  // Consult https://kit.svelte.dev/docs/integrations#preprocessors
  // for more information about preprocessors
  preprocess: [vitePreprocess({ postcss: true })],
 
  kit: {
    adapter: adapter(),
  },
};
 
export default config;

Configure PostCSS#

Create postcss.config.cjs with the following content:

module.exports = {
  plugins: {
    "postcss-import": {},
    "tailwindcss/nesting": {},
    tailwindcss: {},
    autoprefixer: {},
  },
};

Configure TailwindCSS#

First, Run npm install @tinka/tailwindcss.

Create tailwind.config.cjs with the following content:

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [require("@tinka/tailwindcss/config")],
  content: ["./src/**/*.{svelte,js,ts}"],
};

Remember to change the content array to reflect your project setup.