How to use destack's tailwind css in custom component?

Open loongmxbt opened this issue 3 years ago • 0 comments

Hi, I follow the example of using a custom component. But I also want to use tailwind css in this component. Since destack already imported tailwind css, how can I use it?

import { ContentProvider } from 'destack'
import 'grapesjs/dist/css/grapes.min.css'
import Head from 'next/head'
import Header from "../components/Header"
import Hero from "../components/Hero"
import Footer from "../components/Footer"


export { getStaticProps } from 'destack/build/server'

export default function Home(props) { 
  return (
    <div style={{height: '100%'}}>
      <Head>
        <title>RE Predicts - Renewable Power Predict API Toolkit</title>
        <meta name="description" content="Wind Farm, PV Plant Power Forecast" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Header />
      <Hero />
      <div>API Test Component</div>
      <ContentProvider {...props}/>
      <Footer />
    </div>)
}

export default function Header() {
  return (
    <header className="text-gray-600 body-font">
      <div className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
        <a className="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" className="w-10 h-10 text-white p-2 bg-blue-500 rounded-full" viewBox="0 0 24 24">
            <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
          </svg>
          <span className="ml-3 text-xl">Tailblocks</span>
        </a>
        <nav className="md:ml-auto md:mr-auto flex flex-wrap items-center text-base justify-center">
          <a className="mr-5 hover:text-gray-900">First Link</a>
          <a className="mr-5 hover:text-gray-900">Second Link</a>
          <a className="mr-5 hover:text-gray-900">Third Link</a>
          <a className="mr-5 hover:text-gray-900">Fourth Link</a>
        </nav>
        <button className="inline-flex items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0">Button
          <svg fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" className="w-4 h-4 ml-1" viewBox="0 0 24 24">
            <path d="M5 12h14M12 5l7 7-7 7"></path>
          </svg>
        </button>
      </div>
    </header>
  );
}

Mar 19 '22 11:03 loongmxbt