<\/a>Installing Flask<\/h3>\n\n\n\nBefore creating a flask app, we’ll begin the installation first. Open up your terminal and run the following command.<\/p>\n\n\n\n
pip install flask<\/pre><\/div>\n\n\n\n<\/a>Creating the Flask server<\/h3>\n\n\n\nNext, we’ll lay the pipeline for creating the flask server. Start by creating a folder in which we’ll put our files then inside that folder create an app.py<\/code> file.<\/p>\n\n\n\nThen, we’ll create a subfolder called templates<\/code> in which we’ll store our HTML files and then create another subfolder called static<\/code> which will be holding styles, scripts, and static images for our frontend.<\/p>\n\n\n\nflask_folder\/\n\u251c\u2500\u2500 app.py\n\u251c\u2500\u2500 static\n\u2514\u2500\u2500 templates<\/pre><\/div>\n\n\n\nIn our app.py<\/code> file we’ll add the following code to create a flask server<\/p>\n\n\n\nfrom flask import Flask, render_template\n\napp = Flask(__name__)\n\n\n@app.route(\"\/\")\ndef index():\n return render_template(\"index.html\")\n\n\nif __name__ == '__main__':\n app.run(debug=True)<\/pre><\/div>\n\n\n\nThe above code will create a simple flask server with a route that will be responsible for displaying the webpage from the index.html<\/code> file which we haven’t created yet.<\/p>\n\n\n\nAdd a new file called index.html<\/code> inside the templates<\/em> subfolder.<\/p>\n\n\n\nIn our index.html<\/code> file add the following HTML<\/p>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Title<\/title>\n<\/head>\n<body>\n <h1>Hi, there!!<\/h1>\n<\/body>\n<\/html><\/pre><\/div>\n\n\n\nLet’s start our server by running the following command in our terminal<\/p>\n\n\n\n
python app.py<\/pre><\/div>\n\n\n\nThis will start our development server and we can see our webpage serving on http:\/\/127.0.0.1:5000<\/code>.<\/p>\n\n\n\n![\"Flask](\"https:\/\/geekpython.in\/wp-content\/uploads\/2023\/08\/1-2.png\")
<\/figure>\n\n\n\n<\/a>Adding TailwindCSS into the flask<\/h1>\n\n\n\nWe’ll now perform the following steps to merge the CSS framework(TailwindCSS) into our flask app.<\/p>\n\n\n\n
<\/a>Installing TailwindCSS<\/h3>\n\n\n\nWe can use either npm<\/code> or yarn<\/code> to install the dependency in our project folder. Run the following command in the terminal for installing TailwindCSS using npm<\/em> and yarn<\/em> respectively.<\/p>\n\n\n\nnpm install tailwindcss<\/pre><\/div>\n\n\n\nOR<\/p>\n\n\n\n
yarn add tailwindcss<\/pre><\/div>\n\n\n\nI am using npm for this tutorial.<\/p>\n\n\n\n
After running the command, the installation will begin and the following files will be created in the root directory.<\/p>\n\n\n\n
flask_folder\/\n\u251c\u2500\u2500 node_modules\/\n\u251c\u2500\u2500 package.json\n\u2514\u2500\u2500 package-lock.json<\/pre><\/div>\n\n\n\n<\/a>Creating a configuration file<\/h3>\n\n\n\nRun the following command in the terminal to create a configuration file.<\/p>\n\n\n\n
npx tailwindcss init<\/pre><\/div>\n\n\n\nThe command will create a minimal tailwind.config.js<\/code> file at the root of the project.<\/p>\n\n\n\nmodule.exports = {\n content: [],\n theme: {\n extend: {},\n },\n plugins: [],\n}<\/pre><\/div>\n\n\n\nWe need to do some modifications to the content<\/code> section of the tailwind.config.js<\/code> to configure the paths to all of your HTML templates.<\/p>\n\n\n\nmodule.exports = {\n mode: 'jit',\n content: [\".\/templates\/**\/*.{html,htm}\"],\n theme: {\n extend: {},\n },\n plugins: [],\n}<\/pre><\/div>\n\n\n\nWe just added the templates<\/code> folder where all the HTML files will go and used the glob pattern<\/strong><\/a> which makes it easy to match all of the content files in the project.<\/p>\n\n\n\n\n- Use
*<\/code> to match anything except slashes and hidden files<\/li>\n\n\n\n- Use
**<\/code> to match zero or more directories<\/li>\n\n\n\n- Use comma separate values between {} to match against a list of options<\/li>\n<\/ul>\n\n\n\n
Additionally, we enabled the jit<\/code> (just-in-time) mode since the JIT mode generates the CSS on-demand by scanning the template files.<\/p>\n\n\n\n<\/a>Creating CSS files and adding tailwind directives<\/h3>\n\n\n\nInside the static<\/code> folder, create two CSS folders named src<\/code> and css<\/code> and inside these folders add input.css<\/code> and main.css<\/code> files respectively.<\/p>\n\n\n\nflask_folder\/\n\u2514\u2500\u2500 static\/\n \u251c\u2500\u2500 css\/\n \u2502 \u2514\u2500\u2500 main.css\n \u2514\u2500\u2500 src\/\n \u2514\u2500\u2500 input.css<\/pre><\/div>\n\n\n\nNow, add the following code inside the src\/input.css<\/code> file to insert Tailwind\u2019s base, components, and utilities styles into the CSS.<\/p>\n\n\n\nsrc\/input.css<\/code> file<\/p>\n\n\n\n@tailwind base;\n@tailwind components;\n@tailwind utilities;<\/pre><\/div>\n\n\n\n<\/a>Starting the build process<\/h3>\n\n\n\nTo generate the CSS from the preprocessor directives, we need to run the following command in the terminal.<\/p>\n\n\n\n
npx tailwindcss -i .\/static\/src\/input.css -o .\/static\/css\/main.css --watch<\/pre><\/div>\n\n\n\nNote: We will have to run the above code every time we add CSS to our HTML files to see the changes. So the best practice would be to make the above command a script, that will rebuild the CSS without the need to run the CSS build process code every time.<\/strong><\/p>\n\n\n\nIn the package.json<\/code> file add the scripts<\/code><\/p>\n\n\n\n{\n \"dependencies\": {\n \"tailwindcss\": \"^3.1.8\"\n },\n\n \"scripts\": {\n \"create-css\": \"npx tailwindcss -i .\/static\/src\/input.css -o .\/static\/css\/main.css --watch\"\n }\n}<\/pre><\/div>\n\n\n\nNow, run the script create-css<\/code> in the terminal<\/p>\n\n\n\n
pip install flask<\/pre><\/div>\n\n\n\n<\/a>Creating the Flask server<\/h3>\n\n\n\nNext, we’ll lay the pipeline for creating the flask server. Start by creating a folder in which we’ll put our files then inside that folder create an app.py<\/code> file.<\/p>\n\n\n\nThen, we’ll create a subfolder called templates<\/code> in which we’ll store our HTML files and then create another subfolder called static<\/code> which will be holding styles, scripts, and static images for our frontend.<\/p>\n\n\n\nflask_folder\/\n\u251c\u2500\u2500 app.py\n\u251c\u2500\u2500 static\n\u2514\u2500\u2500 templates<\/pre><\/div>\n\n\n\nIn our app.py<\/code> file we’ll add the following code to create a flask server<\/p>\n\n\n\nfrom flask import Flask, render_template\n\napp = Flask(__name__)\n\n\n@app.route(\"\/\")\ndef index():\n return render_template(\"index.html\")\n\n\nif __name__ == '__main__':\n app.run(debug=True)<\/pre><\/div>\n\n\n\nThe above code will create a simple flask server with a route that will be responsible for displaying the webpage from the index.html<\/code> file which we haven’t created yet.<\/p>\n\n\n\nAdd a new file called index.html<\/code> inside the templates<\/em> subfolder.<\/p>\n\n\n\nIn our index.html<\/code> file add the following HTML<\/p>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Title<\/title>\n<\/head>\n<body>\n <h1>Hi, there!!<\/h1>\n<\/body>\n<\/html><\/pre><\/div>\n\n\n\nLet’s start our server by running the following command in our terminal<\/p>\n\n\n\n
python app.py<\/pre><\/div>\n\n\n\nThis will start our development server and we can see our webpage serving on http:\/\/127.0.0.1:5000<\/code>.<\/p>\n\n\n\n<\/figure>\n\n\n\n<\/a>Adding TailwindCSS into the flask<\/h1>\n\n\n\nWe’ll now perform the following steps to merge the CSS framework(TailwindCSS) into our flask app.<\/p>\n\n\n\n
<\/a>Installing TailwindCSS<\/h3>\n\n\n\nWe can use either npm<\/code> or yarn<\/code> to install the dependency in our project folder. Run the following command in the terminal for installing TailwindCSS using npm<\/em> and yarn<\/em> respectively.<\/p>\n\n\n\nnpm install tailwindcss<\/pre><\/div>\n\n\n\nOR<\/p>\n\n\n\n
yarn add tailwindcss<\/pre><\/div>\n\n\n\nI am using npm for this tutorial.<\/p>\n\n\n\n
After running the command, the installation will begin and the following files will be created in the root directory.<\/p>\n\n\n\n
flask_folder\/\n\u251c\u2500\u2500 node_modules\/\n\u251c\u2500\u2500 package.json\n\u2514\u2500\u2500 package-lock.json<\/pre><\/div>\n\n\n\n<\/a>Creating a configuration file<\/h3>\n\n\n\nRun the following command in the terminal to create a configuration file.<\/p>\n\n\n\n
npx tailwindcss init<\/pre><\/div>\n\n\n\nThe command will create a minimal tailwind.config.js<\/code> file at the root of the project.<\/p>\n\n\n\nmodule.exports = {\n content: [],\n theme: {\n extend: {},\n },\n plugins: [],\n}<\/pre><\/div>\n\n\n\nWe need to do some modifications to the content<\/code> section of the tailwind.config.js<\/code> to configure the paths to all of your HTML templates.<\/p>\n\n\n\nmodule.exports = {\n mode: 'jit',\n content: [\".\/templates\/**\/*.{html,htm}\"],\n theme: {\n extend: {},\n },\n plugins: [],\n}<\/pre><\/div>\n\n\n\nWe just added the templates<\/code> folder where all the HTML files will go and used the glob pattern<\/strong><\/a> which makes it easy to match all of the content files in the project.<\/p>\n\n\n\n\n- Use
*<\/code> to match anything except slashes and hidden files<\/li>\n\n\n\n- Use
**<\/code> to match zero or more directories<\/li>\n\n\n\n- Use comma separate values between {} to match against a list of options<\/li>\n<\/ul>\n\n\n\n
Additionally, we enabled the jit<\/code> (just-in-time) mode since the JIT mode generates the CSS on-demand by scanning the template files.<\/p>\n\n\n\n<\/a>Creating CSS files and adding tailwind directives<\/h3>\n\n\n\nInside the static<\/code> folder, create two CSS folders named src<\/code> and css<\/code> and inside these folders add input.css<\/code> and main.css<\/code> files respectively.<\/p>\n\n\n\nflask_folder\/\n\u2514\u2500\u2500 static\/\n \u251c\u2500\u2500 css\/\n \u2502 \u2514\u2500\u2500 main.css\n \u2514\u2500\u2500 src\/\n \u2514\u2500\u2500 input.css<\/pre><\/div>\n\n\n\nNow, add the following code inside the src\/input.css<\/code> file to insert Tailwind\u2019s base, components, and utilities styles into the CSS.<\/p>\n\n\n\nsrc\/input.css<\/code> file<\/p>\n\n\n\n@tailwind base;\n@tailwind components;\n@tailwind utilities;<\/pre><\/div>\n\n\n\n<\/a>Starting the build process<\/h3>\n\n\n\nTo generate the CSS from the preprocessor directives, we need to run the following command in the terminal.<\/p>\n\n\n\n
npx tailwindcss -i .\/static\/src\/input.css -o .\/static\/css\/main.css --watch<\/pre><\/div>\n\n\n\nNote: We will have to run the above code every time we add CSS to our HTML files to see the changes. So the best practice would be to make the above command a script, that will rebuild the CSS without the need to run the CSS build process code every time.<\/strong><\/p>\n\n\n\nIn the package.json<\/code> file add the scripts<\/code><\/p>\n\n\n\n{\n \"dependencies\": {\n \"tailwindcss\": \"^3.1.8\"\n },\n\n \"scripts\": {\n \"create-css\": \"npx tailwindcss -i .\/static\/src\/input.css -o .\/static\/css\/main.css --watch\"\n }\n}<\/pre><\/div>\n\n\n\nNow, run the script create-css<\/code> in the terminal<\/p>\n\n\n\n
![\"Flask](\"https:\/\/geekpython.in\/wp-content\/uploads\/2023\/08\/2-3.png\")
<\/figure>\n\n\n\n