Writing your own style components with TailwindCSS and Sass
Out of the box, TailwindCSS can be very cluttered. It's intended to place all of your classes and styling in your markup. I understand that this can be very easy in some cases, but in a big project with several developers and a styleguide, it can become quite unmaintainable. Luckilly TailwindCSS has a very good way to write reusable components. Using the @apply
classes can be one way, but combining Sass pre-processor and Tailwind @apply
makes TailwindCSS work like a dream!
Set up TailwindCSS
So TailwindCSS (without the use of a CDN) works really easy. You install the NPM package, PostCSS and autoprefixer, make a file called tailwind.css
and you're pretty much done. Using it with Sass is a little more complicated, but still easy enough.
Firstly install TailwindCSS as normal
yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest
You can run npx tailwindcss init
to set up a basic tailwind.config.js
file with following content:
// tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {},
plugins: [],
}
Since we're using PostCSS to process our TailwindCSS Sass file, we also have to set up a postcss.config.js
file with following content:
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
Adding TailwindCSS as Sass
now we have a basic project with TailwindCSS, still we would like to use it with sass, so let's make a file called tailwind.scss
in your styles directory and put the following lines in there so PostCSS knows it's Tailwind:
// tailwind.scss
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
Now let's set up PostCSS to process the Sass file to an outputted CSS file
Adding PostCSS Sass support
First of all, PostCSS isn't limited. You can install a lot of plugins that might solve your specific problem with your css files; so give it a search when you want to create your own CSS workflow.
To add Sass support to your project might differ a lot from another project. Some projects use webpack where you can use sass-loader
to process your Sass files, others might use Vite where you simply have to install the Sass NPM package. So google a bit around and you'll find a way to preprocess the Sass.
To use nesting in Sass / TailwindCSS (which you really want, believe me...) we just have to install a specific PostCSS package called postcss-nested
.
Just run yarn add -D postcss-nested
and add the plugin to your postcss.config.js
file:
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
require('postcss-nested')
]
}
Write your components
Now we have a Sass file that can be processed, we can also import other files. For instance, what if we decide to use one button style everywhere, we can just add it to the tailwind.scss
file:
// tailwind.scss
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
button {
@apply rounded-full bg-gray-900 text-center py-2 px-4 text-white
}
Very easy right, we can also take this a step further by importing custom component files by using the postcss-easy-import
plugin for PostCSS.
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
'postcss-easy-import': { prefix: '_', extensions: ['.css', '.scss'] },
}
}
now PostCSS will know that we want to import another css or scss file without us telling it what extensions and prefixes to import.
Let's make a file called /components/_button.scss
in the styles folder:
// tailwind.scss
/* Tailwind base */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
/* Custom Components */
@import "./components/button";
// ./components/_button.scss
button {
@apply rounded-full bg-gray-900 text-center py-2 px-4 text-white
}
Really clean right!
Go crazy with it. Make different component files for pages, components and everything else you can think of. The developer who has to read your code will thank you!
Top comments (0)