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 [email protected]: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