Component

Functional

export type ResourceNameProps = {
  id: string
}
 
export function ResourceName({ id }: Props) {
  return (
    <div id={id}>
      <p>Hello, I'm a component, auto generated by Clingon CLI!</p>
    </div>
  )
}

Css Modules

import styles from './ResourceName.css'
 
export type ResourceNameProps = {
  id: string
}
 
export function ResourceName({ id }: Props) {
  return (
    <div id={id} className={styles.component}>
      <p className={styles.message}>Hello, I'm a component, auto generated by Clingon CLI!</p>
    </div>
  )
}

SCSS

import './ResourceName.scss'
 
export type ResourceNameProps = {
  id: string
}
 
export function ResourceName({ id }: Props) {
  return (
    <div id={id} className="component">
      <p className="message">Hello, I'm a component, auto generated by Clingon CLI!</p>
    </div>
  )
}

CSS

import './ResourceName.css'
 
export type ResourceNameProps = {
  id: string
}
 
export function ResourceName({ id }: Props) {
  return (
    <div id={id} className="component">
      <p className="message">Hello, I'm a component, auto generated by Clingon CLI!</p>
    </div>
  )
}

Tailwind

import './ResourceName.css'
 
export type ResourceNameProps = {
  id: string
}
 
export function ResourceName({ id }: Props) {
  return (
    <div id={id} className="component">
      <p className="message">Hello, I'm a component, auto generated by Clingon CLI!</p>
    </div>
  )
}

Tailwind Inline

export type ResourceNameProps = {
  id: string
}
 
export function ResourceName({ id }: Props) {
  return (
    <div id={id} className="flex flex-row justify-center items-center content-center">
      <p className="text-slate-900 text-lg">
        Hello, I'm a component, auto generated by Clingon CLI!
      </p>
    </div>
  )
}

Unit Test Page