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'a
Not every component uses Tailwind, but most do. For example the app navigation does not because there are a lot of complex states at different breakpoints which target child selectors and Tailwind doesn't have great support for these use cases yet.
There is a ClassHelper component included that will enable you to dynamically apply classes to a Tailwind or SCSS-styled component.
import { ClassHelper } from 'components/lib';
import Style from './card.tailwind.js';
export function Card(props){
const cardStyle = ClassHelper(Style, {
shadow: props.shadow,
loading: props.loading
});
}
The first argument is the Style object (either your imported Tailwind or SCS object). The second argument is a list of classes you want to apply. You can just pass in the prop object if your class names match your prop names.
If you style object has a class named
base then this will be applied automatically.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 modify with your own brand colours.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 1yr ago