A starter kit to get going with tailwind, gulp and browser-sync.

  • By Simon Vrachliotis
  • Last update: Aug 30, 2022
  • Comments: 5

Tailwind Starter

A starter kit to get going with tailwind, gulp and browser-sync.

tailwind starter kit

Time to design in the browser and create something awesome with tailwind!

This starter kit gives you a browser-sync dev server, which comes pretty handy. Everytime you save a HTML file, your browser will inject new styles / reload the page for your convenience, so you can focus on what you're creating.

Go ahead and build something cool!

How to get started?

  1. Clone this repo
  2. yarn or npm install to install the required dependencies
  3. Customise the tailwind.js config file (only if needed!)
  4. gulp to kickoff the dev server, and open your browser window. Optionally you can run the following:
    • yarn dev or npm run dev to start the development server
    • yarn build or npm run build to run a build without starting the server
  5. Edit index.html in ./dist/ and start creating!

If you make changes to the tailwind config, you may need to stop and restart the browser-sync server for changes to apply.

Have fun! 🎉

Github

https://github.com/simonswiss/tailwind-starter

Comments(5)

  • 1

    PurgeCSS isn't allowing the compilation classes with prefix

    Hi guys,

    I don't know why, but, when I try to use hover:text-green or md:w-1/2 on any element for example, the .css file in /dist/ path does not contain these prefixes.

    If I put a comment on this line, it works. https://github.com/simonswiss/tailwind-starter/blob/a8f5baa3ad0cac2ea005a7195543cfbc40222fd4/gulpfile.js#L17

    Does it happen to anyone else?

  • 2

    CSS changes aren't showing with browser-sync

    Markup changes are reflected immediately with browser-sync, but to see css changes (when I add classes) I have to restart the browser-sync server. Maybe, I'm missing something?

  • 3

    Error: Cannot find module 'autoprefixer'

    $ gulp [17:24:08] Using gulpfile F:\tailwind-starter-master\gulpfile.js [17:24:08] Starting 'css'... [17:24:08] 'css' errored after 6.16 ms [17:24:08] Error: Cannot find module 'autoprefixer' at Function.Module._resolveFilename (module.js:542:15) at Function.Module._load (module.js:472:25) at Module.require (module.js:585:17) at require (internal/module.js:11:18) at Gulp.gulp.task (F:\tailwind-starter-master\gulpfile.js:22:52) at module.exports (F:\tailwind-starter-master\node_modules\orchestrator\lib\runTask.js:34:7) at Gulp.Orchestrator._runTask (F:\tailwind-starter-master\node_modules\orchestrator\index.js:273:3) at Gulp.Orchestrator._runStep (F:\tailwind-starter-master\node_modules\orchestrator\index.js:214:10) at Gulp.Orchestrator.start (F:\tailwind-starter-master\node_modules\orchestrator\index.js:134:8) at D:\nodejs_global_modules\node_modules\gulp\bin\gulp.js:129:20

  • 4

    Adds NPM/Yarn scripts

    Adds package scripts (npm/yarn).

    I think this has a couple advantages:

    • Familiarity, lots of projects utilize similar scripts and personally, I often explore scripts first to discover functionality
    • Makes it easy to run a build without starting the entire server
    • Will compile without having gulp globally available because package scripts reference ./node_modules/.bin/* to your PATH
  • 5

    Gulpfile needs to run css task on html change

    Hi, thanks for the starter kit, very handy to get to grips with Tailwind.

    When I edit the index.html file and add something that would change the CSS, for example, on the container class I add bg-blue-lightest, when the browser is reloaded the background colour does not show. This seems to be because the html watch task only reloads the browser. Because the CSS has been purged it does not contain a definition for bg-blue-lightest so doesn't show.

    The solution I used was to add

    gulp.watch(paths.dist.base + "*.html", ["css"]);

    before the existing html watch line.

    Now when I change the index.html file it rebuilds the css file before reloading the browser.

Popular Tag

Related