Tailwind CSS
Tailwind CSS 4, written for you
frascati styles every site with Tailwind CSS 4. Colours, fonts and type sizes sit in one theme in index.css, and you change them in the chat or the Code view.
Why Tailwind CSS
- Styles sit next to the markup as small utility classes, so each part of a page can be read on its own
- Tailwind CSS 4 defines the theme in CSS with @theme, instead of a separate JavaScript config file
- Responsive prefixes such as md: and lg: put phone, tablet and desktop layouts in the same code
- One shared set of colours, fonts and sizes keeps every page consistent
How frascati uses it
frascati writes the theme of each site into index.css with @theme: a paper colour, an accent colour, the fonts and the type sizes, all chosen for the business. The components use them as utility classes such as bg-paper, text-ink or text-accent. To change the colours or fonts, ask in the chat or edit index.css in the Code view. Fonts are loaded from Bunny Fonts, not from Google.
Questions
- Do I need to know Tailwind CSS?
- No. You describe the look in plain words and frascati writes the classes. The Code view shows them if you want to read or edit them.
- Can I change the colours and fonts?
- Yes. Ask in the chat, for example for your brand colour or a different font, or edit the theme in index.css in the Code view.
- Which version of Tailwind CSS does frascati use?
- Tailwind CSS 4. The theme is defined in CSS with @theme in index.css.
- Why Tailwind instead of plain CSS?
- The styles live next to the markup, so each part of a page can be read and changed on its own, and the shared theme keeps colours and spacing consistent across pages.
More of the stack
Your website, about two minutes from now
3 days free with a card, then from $12 a month. The plan starts automatically unless you cancel.