4

Card.svelte

<script lang="ts">
  export let active;
  export let color;
</script>

<div
    class={classnames(`w-80 border-4 rounded-lg p-6 border-${color}-500`, {
        [`bg-${color}-500`]: active
    })}
>

index.svelte

<div>
  <Card color="blue" active/>
  <Card color="pink" />
</div>

postcss.config.cjs

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

tailwind.config.js

module.exports = {
    content: ['./src/**/*.{html,js,svelte,ts}'],
    theme: {
        extend: {
            fontFamily: {
                oswald: ['Oswald']
            }
        }
    },
    plugins: []
};

The background and border colors are not showing up. However, when I manually enter the colors e.g "border-blue-500", the props seem to work for that specific color and goes back to not working after I refresh.

How do I fix this?

eflat
  • 79
  • 4
  • Why do people even use tailwind: https://stackoverflow.com/questions/69687530/dynamically-build-classnames-in-tailwindcss – morganney Jan 20 '22 at 14:33
  • @morganney. I just needed to add the dynamic classes as a comment somewhere. e.g `// bg-blue-500 text-blue-100`. I found this in a comment on the accepted answer. Thanks for the help. – eflat Jan 21 '22 at 01:00
  • So a comment triggered the necessary styles? What? Tailwind is technology I will NEVER use. – morganney Jan 21 '22 at 14:14
  • 2
    Tailwind needs to find the full text value, similar issue [How to use Tailwind background-image in SvelteKit](https://stackoverflow.com/questions/70585661/how-to-use-tailwind-background-image-in-sveltekit) – Bob Fanger Jan 23 '22 at 17:20

0 Answers0