diff --git a/.gitignore b/.gitignore
index d77acc7..0570682 100644
--- a/.gitignore
+++ b/.gitignore
@@ -50,3 +50,6 @@
 config/settings.local.yml
 config/settings/*.local.yml
 config/environments/*.local.yml
+
+/app/assets/builds/*
+!/app/assets/builds/.keep
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..1853e6f
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,15 @@
+{
+  "tailwindCSS.includeLanguages": {
+    "javascript": "javascript",
+    "html": "html",
+    "erb": "html"
+ },
+  "tailwindCSS.emmetCompletions": true,
+  "files.associations": {
+    "*.html.erb": "erb"
+  },
+  "emmet.includeLanguages": {
+    "html.erb": "html",
+    "erb": "html"
+  }
+}
diff --git a/Gemfile b/Gemfile
index fce7d4d..d3405ff 100644
--- a/Gemfile
+++ b/Gemfile
@@ -43,6 +43,9 @@ gem "kaminari", "1.2.2"
 # Cron based periodical jobs
 gem "whenever", "1.0.0", require: false
 
+# Tailwind CSS framework
+gem "tailwindcss-rails", "2.0.21"
+
 group :development, :test do
   # fake data for development and testing
   gem "faker", "3.1.0"
diff --git a/Gemfile.lock b/Gemfile.lock
index e961e2e..c6bccf5 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -283,6 +283,8 @@ GEM
       sprockets (>= 3.0.0)
     stimulus-rails (1.2.1)
       railties (>= 6.0.0)
+    tailwindcss-rails (2.0.21-aarch64-linux)
+      railties (>= 6.0.0)
     thor (1.2.1)
     timeout (0.3.1)
     turbo-rails (1.3.2)
@@ -332,6 +334,7 @@ DEPENDENCIES
   sidekiq (= 7.0.2)
   sprockets-rails (= 3.4.2)
   stimulus-rails (= 1.2.1)
+  tailwindcss-rails (= 2.0.21)
   turbo-rails (= 1.3.2)
   tzinfo-data
   web-console (= 4.2.0)
diff --git a/Procfile.dev b/Procfile.dev
new file mode 100644
index 0000000..023e98a
--- /dev/null
+++ b/Procfile.dev
@@ -0,0 +1,2 @@
+web: bin/rails server -p 3000
+css: bin/rails tailwindcss:watch
diff --git a/app/assets/builds/.keep b/app/assets/builds/.keep
new file mode 100644
index 0000000..e69de29
diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js
index ddd546a..b06fc42 100644
--- a/app/assets/config/manifest.js
+++ b/app/assets/config/manifest.js
@@ -2,3 +2,4 @@
 //= link_directory ../stylesheets .css
 //= link_tree ../../javascript .js
 //= link_tree ../../../vendor/javascript .js
+//= link_tree ../builds
diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css
new file mode 100644
index 0000000..8666d2f
--- /dev/null
+++ b/app/assets/stylesheets/application.tailwind.css
@@ -0,0 +1,13 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/*
+
+@layer components {
+  .btn-primary {
+    @apply py-2 px-4 bg-blue-200;
+  }
+}
+
+*/
diff --git a/app/views/demo/_tailwind.html.erb b/app/views/demo/_tailwind.html.erb
new file mode 100644
index 0000000..798994d
--- /dev/null
+++ b/app/views/demo/_tailwind.html.erb
@@ -0,0 +1,15 @@
+<section class="section-function">
+  <h2 class="header-section">Tailwind CSS Framework</h2>
+
+  <div class="section-description">
+    <p>The content below is made with using Tailwind CSS</p>
+  </div>
+
+  <!--
+    1. https://spaquet.medium.com/tailwind-css-autocomplete-in-vscode-with-ruby-on-rails-63a5fc24a1a4
+    2. https://tailwindcss.com/docs/border-width
+  -->
+  <h1 class="mt-4 mb-4 ml-0 mr-0 p-5 font-serif text-4xl text-red-500 border-8 border-cyan-500">
+    Hello world!!
+  </h1>
+</section>
diff --git a/app/views/demo/index.html.erb b/app/views/demo/index.html.erb
index a17aeea..8b48259 100644
--- a/app/views/demo/index.html.erb
+++ b/app/views/demo/index.html.erb
@@ -7,3 +7,4 @@
 <%= render partial: 'found_articles', locals: { articles: @found_articles, term: @search_query } %>
 <%= render partial: 'articles_without_caching', locals: { articles: @articles } %>
 <%= render partial: 'articles_with_caching', locals: { articles: @articles } %>
+<%= render partial: 'tailwind' %>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 25e2161..c603c08 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
+    <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
 
     <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
     <%= javascript_importmap_tags %>
diff --git a/bin/dev b/bin/dev
new file mode 100755
index 0000000..74ade16
--- /dev/null
+++ b/bin/dev
@@ -0,0 +1,8 @@
+#!/usr/bin/env sh
+
+if ! gem list foreman -i --silent; then
+  echo "Installing foreman..."
+  gem install foreman
+fi
+
+exec foreman start -f Procfile.dev "$@"
diff --git a/bin/start b/bin/start
index 26917dc..c4975bf 100755
--- a/bin/start
+++ b/bin/start
@@ -5,6 +5,10 @@ rails_install_gems
 rails_db_migrate
 
 cron_start
+puma_start
+sidekiq_start
+tailwind_start
+
 chewy_index
 
 sidekiq_start
diff --git a/bin/stop b/bin/stop
index b39f95a..a752d69 100755
--- a/bin/stop
+++ b/bin/stop
@@ -4,3 +4,6 @@ require_relative "./helpers/helpers.rb"
 puma_stop
 cron_stop
 sidekiq_stop
+tailwind_stop
+
+containers_information
diff --git a/config/tailwind.config.js b/config/tailwind.config.js
new file mode 100644
index 0000000..094432f
--- /dev/null
+++ b/config/tailwind.config.js
@@ -0,0 +1,22 @@
+const defaultTheme = require('tailwindcss/defaultTheme')
+
+module.exports = {
+  content: [
+    './public/*.html',
+    './app/helpers/**/*.rb',
+    './app/javascript/**/*.js',
+    './app/views/**/*.{erb,haml,html,slim}'
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
+      },
+    },
+  },
+  plugins: [
+    require('@tailwindcss/forms'),
+    require('@tailwindcss/aspect-ratio'),
+    require('@tailwindcss/typography'),
+  ]
+}