Get Tailwind Css file from node_modules
I have our "custom" tailwind css in node_modules.
It's a tailwind css custom with storybook.
Hoy we can import it to our project and use it like main tailwind css?
this is our node_modules folder
we import the css like a module
in genesis-design-system we have:
nuxt.js file
import { defineNuxtModule } from '@nuxt/kit'
import { fileURLToPath } from 'node:url'
export default defineNuxtModule({
meta: {
name: '@foticos/genesis-design-system',
compatibility: {
nuxt: '^3.0.0'
}
},
hooks: {
'components:dirs'(dirs) {
// Add ./components dir to the list
dirs.push({
path: fileURLToPath(new URL('./src/components', import.meta.url)),
prefix: ''
})
}
},
setup (options, nuxt) {
nuxt.options.css.push(fileURLToPath(new URL('./dist/genesis.css', import.meta.url)))
}
})Thanks in advance
We have all the tailwind information in StoryBook.
The StoryBook exports the tailwindCss through a module:
`import { defineNuxtModule } from '@nuxt/kit'
import { fileURLToPath } from 'node:url'
export default defineNuxtModule({
meta: {
name: '@foticos/genesis-design-system',
compatibility: {
nuxt: '^3.0.0'
}
},
hooks: {
'components:dirs'(dirs) {
// Add ./components dir to the list
dirs.push({
path: fileURLToPath(new URL('./src/components', import.meta.url)),
prefix: ''
})
}
},
setup (options, nuxt) {
nuxt.options.css.push(fileURLToPath(new URL('./dist/genesis.css', import.meta.url)))
}
})`
In the project, we put cssPath to false, because the tailwindcss is duplicated.
But in genesis.css isnt apply postcss for purge all unused css.
| Owner Name | nuxt-modules |
| Repo Name | tailwindcss |
| Full Name | nuxt-modules/tailwindcss |
| Language | TypeScript |
| Created Date | 2019-04-04 |
| Updated Date | 2023-03-29 |
| Star Count | 1285 |
| Watcher Count | 12 |
| Fork Count | 157 |
| Issue Count | 57 |
YOU MAY BE INTERESTED
| Issue Title | Created Date | Updated Date |
|---|