Styling

Rakkas allows you to use all styling options available to React apps.

Importing a .css file will inject its content to the page via a <style> tag. During development, it will happen dynamically so you may see a flash of unstyled content. When you build your app for production, though, imported styles will be split into external .css files and everything will work even with JavaScript disabled.

For component scoped styles, Rakkas supports CSS modules with the usual naming convention .module.css.

If the project contains a valid PostCSS config, it will be automatically applied to all imported CSS. CSS preprocessors are also supported out of the box: You just need to install your preferred processor (sass, less, or stylus) to enable support for .scss, .sass, .less, .styl and .stylus file extensions. See Vite's documentation for more details.

In addition, Rakkas allows you to use CSS-in-JS solutions. See, for example, the Styled Components integration example.

Tailwind CSS can also be easily integrated: See the example.