sveltewind

Customizable components with TailwindCSS styling for seamless integration into any SvelteKit project.

Installation (Option 1)

npm i -D @codepiercer/sveltewind
  • Create a tailwind.config.cjs file in the root of your project and add the following:

    // tailwind.config.cjs
    module.exports {
      presets: require('@codepiercer/sveltewind/config.cjs')
    }
    
  • Create a postcss.config.cjs file in the root of your project and add the following:

    // postcss.config.cjs
    module.exports = {
      plugins: {
        tailwindcss: {},
        autoprefixer: {}
      }
    }
    

Installation (Option 2) - use the pre configured sveltekit template

npx degit git@github.com:codepiercer/sveltewind-template.git myapp

Usage

// Example.svelte
<script>
  import { Button } from '@codepiercer/sveltewind/components'
</script>

<Button.Primary class="text-green-500">Click Me</Button.Primary>

Development

docker compose --service-ports run --rm app
npm i
npm run dev

© CODEPIERCER. All rights reserved.

Top categories

Loading Svelte Themes