Could you add additional css options to the documentation

[timscodebase]

I am not a fan of tailwind css. Could you add instructions for "vanilla CSS"?

[lucacasonato]

Coming soon

[timscodebase]

Please let me know if I can help. This is an awesome project! 🏆🔥

[davidhousedev]

It'd be great to see Vanilla Extract represented here as well!

[timscodebase]

@davidhousedev What do you me buy "Vanilla Extract"?

[timscodebase]

@ry @jed Where would I put a styles directory?

[ZackarySantana]

@timscodebase I think currently, a styles directory goes in the static folder

[davidhousedev]

@timscodebase see here: https://vanilla-extract.style

[nhc]

@timscodebase see here: https://vanilla-extract.style

+1 for this type of thing. We have a home rolled system using Emotion https://emotion.sh/docs/introduction that does similar and its really nice to have CSS in JS

Why? (top of my head)

• Variables in the objects
• set mediaqeries breakpoints once, then use a function in the TS objects for the corresponding breakpoints so

import {Breakpoints as bp} from './comp/mediaqueries'

const styles = createStyles({
    main: {
        width: bp([200, 600, 1000, 1200])
    }
)

// Also programatically identiify devices 

import {isMobile, isTablet, isPortrait } from './comp/devices'

if(isMobile && isPortrait) {
    <RenderThisWickedComponent />
}

[osdiab]

I also use Emotion (although Vanilla Extract looks suuuper nice!) and it's further useful since it's easy to compose styles freely and decouple styling from the actual HTML markup, while having predictable and easy to understand style scoping. Looking forward to proper support for this stuff here, as it's one of my main blockers for using Fresh seriously.

[rista404]

Any progress on this one? Would love to see vanilla-extract 🧁 as it goes well with the Fresh 🍋 philosophy.

[ValeriaVG]

I've made @emotion/css work with fresh for one of the projects. It works for islands and server-side rendered pages, but I didn't test it enough to call it production ready just yet.

Here's the gist if anyone is interested: https://gist.github.com/ValeriaVG/fae78394feee2ae44b9c58521a33d3e9

Example usage:

export default function Hero({ background, headline }: HeroProps) {
  return (
    <section
      class={heroClass}
    >
      {"image" in background && (
        <img
          src={background.image.url}
        />
      )}
      {"video" in background && (
        <video
          src={background.video.url}
          loop
          muted
        />
      )}
      <h1>{headline}</h1>
    </section>
  );
}

const heroClass = css`
min-height:50vh;
width: 100%;
box-sizing: border-box;
display: flex;
position:relative;
&>h1{
  font-size: 18px;
  color: white;
  position: absolute;
  bottom: 1rem;
  left:1rem;
  right:1rem;
  text-align:center;
  z-index:1;
}
&>img,&>video{
  width: 100%;
}
`;

[officialrajdeepsingh]

I already explain how to use tailwind css with Fresh. check out my article. I hope it work for you. for me it work fine

[alex-kinokon]

@officialrajdeepsingh Literally the first comment of the issue is about how to NOT use Tailwind.