Tailwind CSS Docker Playground is a container based playground with live reload for learning Tailwind CSS. Your host machine only needs to have Docker and Docker Compose installed on it to get up and running with the Tailwind CSS Docker Playground.

• Only requires Docker and Docker Compose to be installed on the host machine
• A lightweigh Alpine Linux based Node.js base image
• Support for PostCSS CLI processing
• Support for PostCSS Autoprefixer
• Support for Live Server for super fast live browser reloading

1. Make sure you have Docker and Docker Compose installed on your machine.

2. Clone this repo to a folder of your choice.

3. Run docker-compose up to build the Docker image, install the projects node modules, and start the live reloading server. Once this process is complete, you should see a URL ending with port 9000. Open this in your browser. At this time, you should be seeing a raw unstyled welcome page.

4. Open a new tab or terminal window and browse to the Tailwind CSS Docker Playground project root. Run the command below to generate the /src/public/main.css file, which imports Tailwind CSS, processes any custom CSS in the /src/base.css file, add autoprefixer support, and outputs the /src/public/main.css.

   docker run -v $(PWD)/src:/var/www -w /var/www node:12.16-alpine npm run build
   

5. If you return to your browser, you should now see Tailwind CSS styles applied to the welcome screen.

6. Now you can open up the /src/public/index.html and make a chance to the default welcome screen. As soon as you save your change, your browser should automatically reload showing the latest changes. If you want to test out any of the @apply or themeing capabilities of Tailwind CSS, you will need to re-run the command from step 4 above to regenerate your /src/public/main.css file.

The Laravel framework is open-sourced software licensed under the MIT license.