We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Overriding the primary CSS colour


I'm using Syncfusion with the tailwind theme and was wondering if there's a way to override the main colour in a single line without having to find every class using the primary colour and manually adding that CSS to my CSS file and overriding the colour.


2 Replies

JS Jamuna Sundaram Syncfusion Team December 12, 2022 05:31 PM UTC

Hi Taylan ,

Greetings from Syncfusion support.

We are evaluating your reported scenario .We will update further details on 13 Dec 2022.

Jamuna Sundaram

JS Jamuna Sundaram Syncfusion Team December 14, 2022 04:39 AM UTC

Hi Taylan ,

We have created  a vue sample using scss  for tailwind theme, as you mentioned we have customized the primary color by overriding the existing $primary variable.  On modifying  this variable the changes will  reflected for all the components which uses $primary as a variable name. Also , if you want customize the entire control  you can achieve this by changing the variables maintained as $primary-text-color, $success, $content-text-color-alt1. So, you can find reference of variable in the below UG documentation. For tailwind theme the definition file is maintained in folder path as mentioned here (../node_modules/@syncfusion/ej2-base/styles/definition/_tailwind.scss) .In this definition file if you override the primary color variable in the application level it will be reflected in the areas were $primary color is utilized ,based on this we have modified a vue sample in this primary color variable has been overridden due to this primary color used in the sample is been changed for the components you can refer the below sample,

Please refer the below UG documentation,


Please refer the below sample,



Jamuna Sundaram

Live Chat Icon For mobile
Up arrow icon