Search code examples
reactjstailwind-cssgatsby

"How can I install Tailwind CSS for a single page of an existing react project?"

I need assistance in integrating Tailwind CSS into existing React project without replacing the existing style.css. I want to apply Tailwind CSS only to the new 'Contact Us' page that I'm creating. I'm familiar with Tailwind CSS but haven't used it in an existing project before. Any help would be appreciated. Thank you!

Solution

  • In the Tailwind config file, you have to add the folder where Tailwind can be used. If you want to use Tailwind on a specific page, then you can do it like this:

    export default {
  content: [
    "./contact-us-page-location",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

    Here in the content you can specify where you want to use Tailwind CSS.

    By default it is:

     content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],