This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Compile Tailwind to CSS with gulp

    Simon VrachliotisSimon Vrachliotis

    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.

    tailwindTailwind
    cssCSS
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss