To incorporate a custom CSS stylesheet into Tailwind CSS, you can use the @import
directive to add the file to your main CSS file in the following way:
Create a new CSS file for your custom styles and save it in your project directory.
Open your main CSS file and add the @import
directive at the top of the file, followed by the path to your custom CSS file:
/* main.css */
@import url('path/to/custom/styles.css');
/* Tailwind CSS styles */
/* rest of your CSS code */
<div class="bg-red-500 custom-class">Hello World</div>
/* styles.css */
.custom-class {
/* custom styles */
}
Note: If you want to modify Tailwind CSS classes directly, it is recommended to use the tailwind.config.js
file to override the default styles instead of using a separate custom CSS file.
Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss
Asked: 2023-02-17 11:00:00 +0000
Seen: 14 times
Last updated: May 05 '22