Comment on page
Tailwind & SCSS
Gravity comes with two styling options included for you:
- 1.Tailwind 3
- 2.SCSS modules
By default, the components use Tailwind but you can use the SCSS version simply by changing the import statement in the component.
import Style from './card.tailwind.js'
import Style from './card.module.scss'
The grid, notification and modal components do not have a Tailwind option. These will be supported when Tailwind adds support for the element targetting required for these.
Import the output.css file into
app/app.jsimport '../css/output.css'
Disable the import line above and enable the two SCSS imports in components/view/view
import './scss/normalize.scss';
import './scss/view.scss';
There is a
<ClassHelper/> component included that will enable you to dynamically apply classes to a Tailwind or SCSS-styled component. You can feed a custom style to any component by passing a className prop. This will be automatically applied if you pass the full prop object to ClassHelper or you can set it manually using
className: props.classNameLive reloading is automatically configured for Tailwind and SCSS. The
start script will watch for changes while the build script adds the output CSS file to your static build folder.Gravity includes a full-colour palette with multiple shades - all from the Tailwind library. There is also a brand colour configured inside the
tailwind.config.js file that you can modify with your brand colours.Dark mode is supported for both Tailwind and SCSS. It can be toggled on or off for each user in
/account/profileThe setting is stored in both the
authContext on the client and in the user table of the database so it will persist across user sessions.If you're new to Tailwind and need more help, the Tailwind documentation provides a comprehensive guide to the principles along with a full reference guide to each utility class helper.
Last modified 2mo ago