Compile Tailwind to CSS with gulp
In this lesson, we learn how to generate CSS utility classes from Tailwind's JavaScript config file. We set up a new project from scratch, install tailwind, generate a config file and build a simple gulp task that runs that file through PostCSS to generate the desired CSS output.
file through PostCSS via gulp.
Man 1: [00:00] I have an empty project with just an index.html file that renders "hello world" to the screen. We'll now bring Tailwind to our project, Yarn add Tailwind CSS as a dev dependency. We'll also install Gulp and Gulp PostCSS.
[00:18] Let's create a Gulp file to get started. We first need to require our modules. We'll also create a series of paths we can then use in our Gulp task.
[00:31] Let's write our Gulp task. Gulp.task call CSS. It returns a source of paths.css. We then pipe that source into PostCSS. We pass Tailwind in there. We tell Tailwind to process our config file. We'll cover that in a second. Let's also run our CSS through Autoprefixer and then package that into our dist path. Nice.
[00:57] Let's now generate that Tailwind config file. Tailwind lets you generate a default config file from the command line. We'll go in nodemodules.bin/tailwind. We'll init a file called tailwind.js. We now have a config file which can be customized. You can create a tailor-made version of Tailwind for your project, change the colors, spacing, scales, etc. For this lesson, we'll stick to the default config.
[01:26] What we need to do now is make a source CSS file in which we'll invoke Tailwind. Let's create the styles.css file. We'll inject two things here. First, Tailwind preflight, which is normalized at css plus a few base styles. We'll also inject Tailwind utilities, which is all our utility classes generated from the config.
[01:48] We'll take these two declarations here, which is the source in our Gulp task. We'll run it through PostCSS with our config file and spit out the output in the styles.css file in the root folder. We can do all that by running the CSS Gulp task. Let's give it a go, Gulp CSS. We now have a styles.css file with all our generated styles. In our index.html file, we can add a link tag and point it to current folder/styles.css.
[02:22] Let's add a few Tailwind classes to our H1, text purple, background gray lighter, some padding all around level eight, and margin top level eight as well. Let's change the text to hello Tailwind. Let's save our file, refresh the page, and here we go.