🐛 BUG: Tailwind custom classes from .vue file does not exist #3073

vjandrei · 2022-04-11T10:57:13Z

What version of `astro` are you using?

1.0.0-beta.7

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Mac

Describe the Bug

Seems that the .vue files can not access custom classes from tailwind.

index.astro:3:4: The text-brand-secondaryclass does not exist. Iftext-brand-secondaryis a custom class, make sure it is defined within a@layer directive.

Packaged.json

  "name": "@example/minimal",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview"
  },
  "devDependencies": {
    "astro": "^1.0.0-beta.7",
    "postcss-import": "^14.1.0"
  },
  "dependencies": {
    "@astrojs/tailwind": "^0.1.2",
    "@astrojs/vue": "^0.1.1",
    "autoprefixer": "^10.4.4",
    "postcss-apply": "^0.12.0",
    "postcss-nested": "^5.0.6",
    "postcss-nesting": "^10.1.4"
  }
}

astro.config.mjs

import { defineConfig } from 'astro/config';
import tailwind from '@astrojs/tailwind';
import vue from '@astrojs/vue';

// https://astro.build/config
export default defineConfig({
    integrations: [
        tailwind({
            config: {
                path: './tailwind.config.cjs',
            },
        }),
        vue()
    ],
});

tailwind.config.cjs

// tailwind.config.cjs
module.exports = {

    content: ['./public/**/*.html', './src/**/*.{astro,js,jsx,svelte,ts,tsx,vue}'],
    theme: {
        extend: {
            colors: {
                brand: {
                    white: 'var(--color06)',
                    light: 'var(--color01)',
                    primary: 'var(--color02)',
                    default: 'var(--color05)',
                    dark: 'var(--color03)',
                    secondary: 'var(--color04)',
                    exrta01: 'var(--color08)',
                    exrta02: 'var(--color09)',
                    exrta03: 'var(--color10)',
                    exrta04: 'var(--color11)',
                    exrta05: 'var(--color12)'
                }
            },
            fontFamily: {
                'sans': 'var(--font01)',
                'serif': 'var(--font02)',
                'fatface': 'var(--font03)',
                'serif-secondary': 'var(--font04)',
            }
        }
    }
};

global.css

/* src/styles/global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {

  /*
  --color01: #d8c6b8;
  --color02: #da585f;
  --color03: #3f0302;
  --color04: #c05e46;
  --color05: #facbb0;
  --color06: #ede5df;
  --color07: rgb(247, 242, 238);
  */

  --color01: #fffefd;
  --color02: #A97148;
  --color03: #333333;
  --color04: #ee9922;
  --color05: #F0E4CA;
  --color06: #E6D9CF;
  --color07: rgb(247, 242, 238);
  --color08: #ceebe8;
  --color09: #154648;
  --color10: #021a1b;
  --color11: #D3B59E;
  --color12: #e4cebd;

  --font01: "Open Sans", sans-serif;
  --font02: "Playfair Display", serif;
  --font03: "Abril Fatface", cursive;
  --font04: "Gentium Book Basic", serif;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 78px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@layer utilities {
  .text-brand-secondary {
    @apply text-brand-secondary;
  }
}

.vue file

  <nav>Hello Nav!</nav>
</template>

<script>
export default {
  data() {
    return {};
  },
  setup() {
    return {};
  },
  methods: {},
};
</script>

<style lang="postcss">
.someclass {
  @apply text-brand-secondary;
}
</style>

index.astro

---
import '../styles/global.css';
---
<html>...
<body>
<NavBar client:visible />
</body>

More bug messages

    at AtRule.error (/Users/home/Documents/_koodi-projektit/ravintola-paulette/astro1/node_modules/postcss/lib/node.js:60:32)
    at processApply (/Users/home/Documents/_koodi-projektit/ravintola-paulette/astro1/node_modules/tailwindcss/lib/lib/expandApplyAtRules.js:151:33)
    at /Users/home/Documents/_koodi-projektit/ravintola-paulette/astro1/node_modules/tailwindcss/lib/lib/expandApplyAtRules.js:278:9
    at /Users/home/Documents/_koodi-projektit/ravintola-paulette/astro1/node_modules/tailwindcss/lib/processTailwindFeatures.js:52:50
    at plugins (/Users/home/Documents/_koodi-projektit/ravintola-paulette/astro1/node_modules/tailwindcss/lib/index.js:20:104)
    at LazyResult.runOnRoot (/Users/home/Documents/_koodi-projektit/ravintola-paulette/astro1/node_modules/postcss/lib/lazy-result.js:339:16)
    at LazyResult.runAsync (/Users/home/Documents/_koodi-projektit/ravintola-paulette/astro1/node_modules/postcss/lib/lazy-result.js:393:26)
    at LazyResult.async (/Users/home/Documents/_koodi-projektit/ravintola-paulette/astro1/node_modules/postcss/lib/lazy-result.js:221:30)
    at LazyResult.then (/Users/home/Documents/_koodi-projektit/ravintola-paulette/astro1/node_modules/postcss/lib/lazy-result.js:206:17) (x2)
13:51:31 [vite] Internal server error: Failed to resolve entry for package "/Users/home/Documents/_koodi-projektit/ravintola-paulette/astro1/". The package may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package "/Users/home/Documents/_koodi-projektit/ravintola-paulette/astro1/". The package may have incorrect main/module/exports specified in its package.json.
      at packageEntryFailure (/Users/home/Documents/_koodi-projektit/ravintola-paulette/astro1/node_modules/vite/dist/node/chunks/dep-611778e0.js:38290:11)
      at resolvePackageEntry (/Users/home/Documents/_koodi-projektit/ravintola-paulette/astro1/node_modules/vite/dist/node/chunks/dep-611778e0.js:38286:9)
      at tryResolveFile (/Users/home/Documents/_koodi-projektit/ravintola-paulette/astro1/node_modules/vite/dist/node/chunks/dep-611778e0.js:38002:38)
      at tryFsResolve (/Users/home/Documents/_koodi-projektit/ravintola-paulette/astro1/node_modules/vite/dist/node/chunks/dep-611778e0.js:37984:16)
      at Context.resolveId (/Users/home/Documents/_koodi-projektit/ravintola-paulette/astro1/node_modules/vite/dist/node/chunks/dep-611778e0.js:37820:28)
      at Object.resolveId (/Users/home/Documents/_koodi-projektit/ravintola-paulette/astro1/node_modules/vite/dist/node/chunks/dep-611778e0.js:36470:55)
      at runMicrotasks (<anonymous>)
      at processTicksAndRejections (internal/process/task_queues.js:93:5)
      at async ModuleGraph.resolveUrl (/Users/home/Documents/_koodi-projektit/ravintola-paulette/astro1/node_modules/vite/dist/node/chunks/dep-611778e0.js:56090:26)
      at async ModuleGraph.getModuleByUrl (/Users/home/Documents/_koodi-projektit/ravintola-paulette/astro1/node_modules/vite/dist/node/chunks/dep-611778e0.js:55970:23)```

### Link to Minimal Reproducible Example

https://codesandbox.io/s/funny-tree-kgg8zp?file=/src/pages/index.astro:69-77

### Participation

- [ ] I am willing to submit a pull request for this issue.

The text was updated successfully, but these errors were encountered:

tony-sull · 2022-04-12T08:03:25Z

Is the global.css being imported anywhere?

By default, @astrojs/tailwind includes a base stylesheet with the @tailwind directives. When using @layer to extend the Tailwind layers you'll need to disable the built-in base stylesheet and import your own

// astro.config.cjs
export default defineConfig({
  integrations: [
    tailwind({
      config: {
        path: './tailwind.config.cjs',
        applyBaseStyles: false, /** disables the built-in stylesheet */
      },
    }),
    vue(),
  ],
});

// src/pages/index.astro (or your page layouts)
---
import "../styles/global.css";
---

vjandrei · 2022-04-12T08:28:07Z

@tony-sull I updated the issue. index.astro had the global.css included.

chrismwilliams · 2022-05-08T13:24:49Z

Hi,
just came across something similar myself. Custom classes need to be set in the tailwind.config, as per the docs, in order to be available per styles block. Hope that helps

tony-sull · 2022-05-10T21:54:58Z

Great catch @chrismwilliams! I've actually seen CSS variables in a :root work occasionally but it pretty often hits a timing issue related to build order

@vjandrei use Tailwind's config to define all of the custom CSS variables and font families to make sure Tailwind knows what the values are

Make sure to use the applyBaseStyles: false config for the @astrojs/tailwind so that the integration's internal styles don't step on your config 👍

Some frameworks, specifically Vue, will not recognize global @layer directives in a global stylesheet because of how Vue's build system works. Instead, prefer to add a plugin to your Tailwind config. withastro#2660, withastro#3073

* add: @apply exceptions for component frameworks Some frameworks, specifically Vue, will not recognize global @layer directives in a global stylesheet because of how Vue's build system works. Instead, prefer to add a plugin to your Tailwind config. #2660, #3073 * Update README.md * Update README.md

FredKSchott added the bb:investigate label May 10, 2022

tony-sull removed the bb:investigate label May 10, 2022

tony-sull closed this as completed May 10, 2022

Sergix mentioned this issue Aug 16, 2022

🐛 BUG: Style Issues when using @apply (TailwindCSS) #2660

Closed

Sergix mentioned this issue Aug 16, 2022

Include note about Tailwind per-component errors using '@apply' #4353

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

🐛 BUG: Tailwind custom classes from .vue file does not exist #3073

🐛 BUG: Tailwind custom classes from .vue file does not exist #3073

vjandrei commented Apr 11, 2022 •

edited

Loading

tony-sull commented Apr 12, 2022

vjandrei commented Apr 12, 2022

chrismwilliams commented May 8, 2022

tony-sull commented May 10, 2022

🐛 BUG: Tailwind custom classes from .vue file does not exist #3073

🐛 BUG: Tailwind custom classes from .vue file does not exist #3073

Comments

vjandrei commented Apr 11, 2022 • edited Loading

What version of astro are you using?

Are you using an SSR adapter? If so, which one?

What package manager are you using?

What operating system are you using?

Describe the Bug

tony-sull commented Apr 12, 2022

vjandrei commented Apr 12, 2022

chrismwilliams commented May 8, 2022

tony-sull commented May 10, 2022

vjandrei commented Apr 11, 2022 •

edited

Loading

What version of `astro` are you using?