Compiling CSS
Loading "Using Postcss and Tailwind CSS in Remix"
Run locally for transcripts
๐จโ๐ผ Even though most of our users are using modern browsers, there are some CSS
features that not all of our users' browsers support. To make sure that our
styles work for everyone, we need to compile our CSS using
a tool called PostCSS.
Support for this tool is built-in to Remix. As soon as Remix finds configuration
for PostCSS, it will automatically compile the CSS files you import for you as
part of the build process.
And stick this config in there:
export default {
plugins: {
'tailwindcss/nesting': {},
tailwindcss: {},
autoprefixer: {},
},
}
And stick this config in there:
import { type Config } from 'tailwindcss'
import defaultTheme from 'tailwindcss/defaultTheme.js'
export default {
content: ['./app/**/*.{ts,tsx,jsx,js}'],
theme: {
extend: {
fontFamily: {
sans: [
'Nunito Sans',
'Nunito Sans Fallback',
...defaultTheme.fontFamily.sans,
],
},
},
},
} satisfies Config
This is where we configure Tailwind, a CSS framework
that we'll be using to style our app. Our PostCSS configuration includes the
Tailwind plugin so we can use the Tailwind directives in our css files to get
the Tailwind stylesheet on the page. ๐ You can read more about configuring
Tailwind with PostCSS in
the Tailwind docs.
Remix may not pick up on the new config files until you restart the dev server.
Simply click "Stop App" and then "Start App" again to restart the dev server.
That should work, but if it doesn't, stop the workshop app and restart it.
@tailwind base;
@tailwind components;
@tailwind utilities;
Then, using the knowledge you've gained from the previous steps, import this
file and include a link tag for it in the
file.
Finally, to test that this worked, you can style the "Hello World" to have a
Tailwind class name like
p-8 text-xl. If you see the text get bigger and more
spaced, you're all set!- ๐ Remix PostCSS Docs
- ๐ Remix TailwindCSS Docs
