Integration between Nuxt, Tailwind and Syncfusion controls

Question

Hi,I'm building a Nuxt library with Tailwind as a CSS framework and I'm trying to include some Syncfusion controls.I saw in the Release note that the Tailwind CSS theme has been added. Is there an integration between Syncfusion components and Tailwind? What's the best approach?In this CodeSandBox I tried to integrate them but I get an error when I import Syncfusion scss. I'm probably forgetting something in the nuxt.config.js...Thank you in advance.

Sevvandhi Nagulan · Answer

Hi Marco, 

We are currently validating the reported issue and we will update further details on or before of 18th August,2021. We appreciate your patience until then. 

Regards, 
Sevvandhi N

Sevvandhi Nagulan · Answer

Hi Marco, 


Thanks for your patience. 


Since you are using online editor, we request that you to use the cdn for the tailwind theme. Refer the below cdn in the application. 






    <link rel="stylesheet" href=https://cdn.syncfusion.com/ej2/tailwind.css /> 


Sample link: https://codesandbox.io/s/cocky-tereshkova-50eqc 

You can refer the tailwind theme from the node_modules if you are using it in the local application. Please refer the below link. 

UG link: https://ej2.syncfusion.com/vue/documentation/textbox/getting-started/#adding-syncfusion-packages 

Regards, 
Sevvandhi N

Marco Rizzato · Answer

Hi Sevvandhi,thanks but your answer has nothing to do with the questions I asked and it seems you didn't even look at the example I attached. I showed you an example with Nuxt, Tailwind and Syncfusion controls, you instead answered me with one in Vue.js and Syncfusion controls.My problem is that when i use the scss files as below i get the following error:if you open my CodeSandBox and try to use css files everything works, with scss not.I need to use scss files because I have to modify some variables.Thanks.Regards,Marco

Sevvandhi Nagulan · Answer

Hi Marco, We checked your query. As previously stated, the below line indicated that referring of style from node modules . We don't have a node modules folder in the editor. Hence, the problem occured. Please refer the online CDN link in the code sandbox. We also included a local example in which we used the node modules approach. Please refer the following samples. Online editor sample code: Local sample code: Code sandbox sample: https://codesandbox.io/s/syncfusion-tailwind-forked-xdvq2 Local sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/textbox-579974514 Kindly get back to us for further assistance. Regards, Sevvandhi N

Kirill · Answer

Marco, did you solve your problem? I had the same :(

The solution above from Sevvandhi N is not good for me, because in such way i should replace every selector with custom --primary-color variable

Need something like https://www.syncfusion.com/forums/143790/vue-scss , but for Nuxt.js

Marco Rizzato · Answer

Hi Kirill,you are lucky, I solved my problem just yesterday :)The approach shown in your link is correct, you simply need to adapt it for Nuxt.Add these lines in the build section of your nuxt.config.js:build: {    extend(config) {      config.module.rules.push({        test: /\.(sass|scss)$/,        use: {          loader: "sass-loader",          options: {            sassOptions: {              includePaths: ["./node_modules/@syncfusion"]            }          }        }      })    }     }And then in your component you can use scss files  and work with variables:<style lang="scss">$primary: #f3a4a4;@import "@syncfusion/ej2-base/styles/tailwind.scss";@import "@syncfusion/ej2-inputs/styles/tailwind.scss";@import "@syncfusion/ej2-vue-dropdowns/styles/tailwind.scss";style>Et voilà, thats it: The only problem is that if you reference the style as scoped, ​the component doesn't render well. Maybe Sevvandhi could help us...Let me know if the solution works for you ;)

Kirill · Answer

Thank u so much! That works! In my case i only remove sass from test pattern, cause of vuetify styles

config.module.rules.push({
  test: /\.(scss)$/,
  use: {
    loader: 'sass-loader',
    options: {
      sassOptions: {
        includePaths: ['./node_modules/@syncfusion'],
      },
    },
  },
});

Alessandro · Answer

Hello, follow another better (maybe) solution, in nuxt.config.js add:

  build: {
    loaders: {
      scss: { // or sass or both
        sassOptions: {
          includePaths: [resolve(__dirname, './node_modules/@syncfusion')]
        }
      }
    }
  },

Berly Christopher · Answer

Hi Alessandro, 

Thanks for sharing information to us. Please let us know if you need further assistance on this. 

Regards, 
Berly B.C