The CSS for your project is compiled from the files you put in the CSS section of your project.
The entry file is app.css. You can put all your custom CSS in that file, or create other files and include them. Let's say you create a file foo/bar.css, then you can include it in app.css as follows:
@import 'foo/bar';We use PostCSS, along with the postcss-nested plugin to compile the CSS. This means you can write nested CSS:
.main-nav {
a {
text-decoration: underline;
&.active {
font-weight: bold;
}
}
}Devisto works with Tailwind CSS out of the box. The Tailwind config is completely customizable in the tailwind.config.js file you find in the CSS section. All official Tailwind plugins are also available. Here you can see the default config file we use for new projects:
module.exports = {
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [
require('@tailwindcss/forms')({
strategy: 'class',
}),
require('@tailwindcss/typography'),
require('@tailwindcss/aspect-ratio'),
require('@tailwindcss/line-clamp'),
],
}You can use all custom directives from Tailwind in your CSS, like @apply, @screen, @layer, and so on.
If you want to change colors or fonts, you can extend the defaults as follows:
const defaultTheme = require('tailwindcss/defaultTheme')
const colors = require('tailwindcss/colors')
module.exports = {
theme: {
extend: {
colors: {
gray: colors.trueGray,
},
fontFamily: {
sans: ['Rubik', ...defaultTheme.fontFamily.sans],
serif: ['Prata', ...defaultTheme.fontFamily.serif],
},
},
},
...
}Note that you don't have to use Tailwind if you don't want to. Just remove the 3 Tailwind imports in
app.cssand Tailwind will be gone.
In CSS you can also include assets, for example to work with font files:
@font-face {
font-family: 'filson-pro';
src: url('path/to/filson-pro-light.woff2') format('woff2');
...
}Devisto will automatically compile this CSS to include the correct asset URL.
To include CSS from external dependencies, like the CSS you need for sliders, Fancybox and so on, we recommend working with a CDN. You can put the tags in your master template, or add them to the styles stack. If you do this in a file or component you include multiple times, this is the best way to do this:
@once
@push('styles')
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
@endpush
@endonceIf you change a CSS file, the first time you refresh some page of the website, the CSS will recompile, so a little delay can occur. When using Tailwind, normally recompilation will be rare, as you'll spend most of the time in your views applying the utility classes. Only when you make a change to the CSS files or to the Tailwind config file, the compile step will be executed.
In staging environments, no minification or purging will happen, so the CSS file can be quite big. But don't worry: when you publish your site to production, all CSS is minified and purged so your production CSS is as small as possible.
Use the built-in @styles directive in your master template before your closing </head> tag. It will include the compiled CSS for your project automatically:
<html>
<head>
...
@styles
</head>
...
</html>