search

bcc-code / bcc-design

Packages, assets and documentation to use the BCC Design System
https://developer.bcc.no/bcc-design
Apache License 2.0
3 stars 6 forks source link

Installation with tailwind issue #250

Open u12206050 opened 1 year ago

u12206050 commented 1 year ago

Describe the bug

When following the design documentation and tailwind documentation of how to set it up, I get the following error:

`[postcss] postcss-import: ./node_modules/.pnpm/@bcc-code+design-library-vue@1.7.0_tailwindcss@3.3.3_vue@3.3.4/node_modules/@bcc-code/design-library-vue/dist_css/tailwind/index.css:3:1: `@layer base` is used but no matching `@tailwind base` directive is present.`

My styles.css file is as follows:

@import '@bcc-code/design-library-vue/tailwind/index.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

I have also tried with a relative path via node_modules.

Expected behavior

Setup should work as expected.

root cause: commit_id

laurensgroeneveld commented 1 year ago

Your CSS seems to be correct. I see you're using the postcss-import plugin, how is that configured? From the error message I get the feeling Tailwind is first trying to separately compile the imported file.

u12206050 commented 1 year ago

Ensure you are running latest vite version at least 4.4.9

laurensgroeneveld commented 1 year ago

I set up a new Vue app with the latest Vite, but I can't reproduce it. After following the installation instructions my app correctly renders the Vue components.