@nuxtjs/tailwindcss: 6.1.2
nuxt: 3.0.0-rc.11
I am working on a Nuxt 3 project and am using the @nuxtjs/tailwind module to speed up styling. I am using many imported style sheets and noticed after a little that any tailwind change would take some time, sometimes over 30 seconds, to reflect the change on the front end.
These are I believe the relevant aspects of my nuxt.config.ts:
modules: [
'@nuxtjs/tailwindcss',
],
vite: {
css: {
preprocessorOptions: {
scss: {
additionalData: '@import "@/assets/styles/tailwind.scss";',
},
},
},
plugins: [ svgLoader()]
},
tailwindcss: {
jit: true,
exposeConfig: true,
config: {
plugins: [
tailwindTypography,
]
}
}
Here is my tailwind.config.js file:
module.exports = {
mode: 'jit',
content: [
'./components/**/*.{vue,js}',
'./layouts/**/*.{vue,js}',
'./pages/**/*.{vue,js}',
'./plugins/**/*.{js,ts}',
'./nuxt.config.{js,ts}'
],
theme: {
extend: {
(*Custom configuration*)
}
}
}
I am not sure of how optimized this configuration is, but this is what I have gathered from researching around.
I expect the classes to update fairly quickly, and I can achieve this by commenting out the default tailwind imports in my style sheet. This is also the sheet that imports all of my custom classes.
// @import 'tailwindcss/base';
// @import 'tailwindcss/components';
// @import 'tailwindcss/utilities';
@import 'variables';
@import 'mixins';
@import 'normalize';
@import 'fonts';
@import 'typography';
@import 'buttons';
@import 'forms';
@import 'core';
@import 'transitions';
I saw this solution on a Stack Overflow question that was intended for Next.js and found that the same solution works, but limits my ability to inline style. I am not sure of the exact behavior pattern, but occasionally inline styles do not apply as they should. Instead, I use @apply, which is not the largest inconvenience, but any guidance on configuration to allow for inline styling with faster reflection of changes on the frontend is appreciated!
I have attached videos to highlight the disparity in time.
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 |
Issue Title | Created Date | Updated Date |
---|