Revision history [back]

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:

1. Create a new CSS file for your custom styles and save it in your project directory.

2. 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 */

1. Save the file and your custom styles will now be incorporated into your Tailwind CSS styles. You can use your custom styles in your HTML markup just like any other CSS class:

<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.