Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can you mix Tailwind with vanilla CSS?

Tags:

tailwind-css

I am very new to Tailwind, and want to incorporate it into an existing react project. Can I use Tailwind along with all of my current CSS/sass files? Or do I need to start over with styling and only use Tailwind?

like image 620
ac codes Avatar asked Oct 16 '22 08:10

ac codes


1 Answers

To ensure that your current CSS doesn't get overridden. You can add a prefix to the tailwind.config.js

Example: (source: tailwind.com)

// tailwind.config.js
module.exports = {
   prefix: 'tw-',
}

Will generate classes with the prefix .tw- like .tw-{class}:

.tw-text-left {
    text-align: left;
}
.tw-text-center {
    text-align: center;
}
.tw-text-right {
    text-align: right;
}
/* etc. */
like image 95
Davy de Vries Avatar answered Oct 23 '22 13:10

Davy de Vries