Tailwind Resources Logo Tailwind Resources
Flask Tailwind Starter screenshot

Flask Tailwind Starter

Author Avatar Theme by Blackbaba
Updated: 27 Dec 2021
50 Stars

Flask + TailwindCSS Starter Template with PostCSS+PurgeCSS

Github

Categories

Flask

Overview:

The Flask + TailwindCSS Starter Template is a web development template that combines the Flask framework with the TailwindCSS library. It provides a basic Flask app scaffolding and includes setup instructions for integrating TailwindCSS using npm. The template has been updated to include the Tailwind JIT compiler mode, which efficiently purges unused styles in both development and production environments. By following the installation guide, users can quickly set up a development environment and start building web applications using Flask and TailwindCSS.

Features:

  • Basic Flask app scaffolding: The template provides a basic structure for setting up a Flask application, allowing users to quickly start their development process.
  • TailwindCSS setup using npm: The template includes instructions on how to integrate TailwindCSS using npm, ensuring that the latest version of the library is installed and easily accessible.
  • Tailwind JIT compiler mode: The template has been updated to include the Tailwind JIT compiler mode, which efficiently purges unused styles in both development and production environments. This feature helps to optimize the performance and reduce the file size of the final CSS build.

Installation:

To install the Flask + TailwindCSS Starter Template, follow these steps:

  1. Setup and activate a virtual python environment before proceeding.
  2. Clone the repository onto your local computer.
  3. Run pip install -r requirements.txt to install the required Flask packages.
  4. Run npm install to install the required npm packages from the package.json file.
  5. In one terminal, run npm run dev to start the TailwindCSS watcher in JIT watch mode during development. This will enable real-time compilation of styles used in your HTML templates.
  6. In a second terminal, run python run.py to start the Flask development server with debug mode ON.
  7. As you add or remove Tailwind classes in your HTML templates, the watcher running in step 5 will automatically regenerate the app\static\main.css file, which will be picked up by the Flask server running in step 6.
  8. When ready for production, kill the Flask development server running in step 6, and run npm run build:prod to prepare the CSS build for production.
  9. Enjoy using the Flask + TailwindCSS Starter Template for your web development projects!

Summary:

The Flask + TailwindCSS Starter Template is a convenient and efficient tool for building web applications. With its basic Flask app scaffolding and integration of TailwindCSS using npm, developers can quickly set up a development environment and start coding. The inclusion of the Tailwind JIT compiler mode further enhances the template’s performance by efficiently purging unused styles in both development and production environments. By following the installation guide, users can easily install the template and start building web applications using Flask and TailwindCSS.