🌈 ~khtdr/

home / Tutorials / A Tailwind-CSS development server

Simple quick way to get started learning and playing with Tailwind CSS

Example output while running dev-server, shown here: /img/sample-logs.png

Features

  • No "transpiling" configuration is needed (or used).
  • No build tools need to be set up.
  • Tiny reactive web server: ~115 lines of code with lots of comments.
  • Minimal dependencies:

    • chalk for color,
    • socket.io for server <—> browser communication,
    • and tailwindcss of course.

Installation

Clone the GIT repository, and install the dependencies.

git clone https://github.com/khtdr/tailwind-dev-server.git
cd tailwind-dev-server
yarn

Running

yarn start

Then open your browser to: http://localhost:8080

Development

Edit any of the following entry point files:

Changes will be recompiled and automatically refreshed in your browser. Errors will be displayed in the server output.

Create any additional HTML files as needed, using ./index.html as a starting-point reference.

Building

If you like what you see and want to save it and use it, run:

yarn build

And now you can use your newly-built ./tailwind-bundle.css stylesheet however you like.