Replace Bootstrap with Tailwind #685
Open
+64
−152
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Reviewer's GuideThis PR migrates the frontend styling stack from Bootstrap and Sass to Tailwind CSS v4 by updating Webpack loaders and dependencies, refactors component and template markup to use Tailwind utility classes, hardens the Render build script with safer shell syntax, and refreshes project documentation and configuration (including Render’s SECRET_KEY handling) to align with the new stack and deployment flow. Class diagram for Home page component after Tailwind migrationclassDiagram
class Home {
+restCheck: object | null
+showBugComponent: boolean
+setShowBugComponent: function
+useEffect: function
+render(): JSX.Element
}
Home : - Uses Tailwind utility classes for styling
Home : - Replaces <Button> with <button> and Tailwind classes
Class diagram for index.html template after Tailwind migrationclassDiagram
class IndexHtml {
+body: HTML
+h1: HTML (class="text-5xl mb-2")
+p: HTML (class="mb-2")
+code: HTML (class="px-1.5 py-0.5 text-sm font-mono text-pink-600 bg-gray-100 rounded")
+div: HTML (class="max-w-5xl mx-auto px-4")
}
IndexHtml : - Uses Tailwind utility classes for layout and typography
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey there - I've reviewed your changes - here's some feedback:
- Make sure you import the new Tailwind CSS file (and your custom CSS) in your application's entry point or update the webpack entry, otherwise Tailwind’s utilities won’t be included in the bundle.
- Add a tailwind.config.js with appropriate content paths so Tailwind can tree-shake unused styles and pick up your templates/components for production builds.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- Make sure you import the new Tailwind CSS file (and your custom CSS) in your application's entry point or update the webpack entry, otherwise Tailwind’s utilities won’t be included in the bundle.
- Add a tailwind.config.js with appropriate content paths so Tailwind can tree-shake unused styles and pick up your templates/components for production builds.
## Individual Comments
### Comment 1
<location> `render_build.sh:31` </location>
<code_context>
- npx @sentry/cli --auth-token=$SENTRY_API_KEY releases --org=$SENTRY_ORG --project=$SENTRY_PROJECT_NAME files $RENDER_GIT_COMMIT upload-sourcemaps ./frontend/webpack_bundles/ --url-prefix "~/static/webpack_bundles/" --rewrite
- rm ./frontend/webpack_bundles/*.js.map
+if [[ -n "${SENTRY_API_KEY:-}" && -n "${SENTRY_ORG:-}" && -n "${SENTRY_PROJECT_NAME:-}" && -n "${RENDER_GIT_COMMIT:-}" ]]; then
+ npx @sentry/cli --auth-token="${SENTRY_API_KEY}" releases --org="${SENTRY_ORG}" --project="${SENTRY_PROJECT_NAME}" files "${RENDER_GIT_COMMIT}" upload-sourcemaps "./frontend/webpack_bundles/" --url-prefix "~/static/webpack_bundles/" --rewrite
+ rm -f ./frontend/webpack_bundles/*.js.map
fi
</code_context>
<issue_to_address>
Quoting variables in CLI arguments prevents word splitting and globbing issues.
Quoting variables in the command ensures correct handling of values with spaces or special characters, making the script more reliable.
</issue_to_address>
<suggested_fix>
<<<<<<< SEARCH
if [[ -n "${SENTRY_API_KEY:-}" && -n "${SENTRY_ORG:-}" && -n "${SENTRY_PROJECT_NAME:-}" && -n "${RENDER_GIT_COMMIT:-}" ]]; then
npx @sentry/cli --auth-token="${SENTRY_API_KEY}" releases --org="${SENTRY_ORG}" --project="${SENTRY_PROJECT_NAME}" files "${RENDER_GIT_COMMIT}" upload-sourcemaps "./frontend/webpack_bundles/" --url-prefix "~/static/webpack_bundles/" --rewrite
rm -f ./frontend/webpack_bundles/*.js.map
fi
=======
if [[ -n "${SENTRY_API_KEY:-}" && -n "${SENTRY_ORG:-}" && -n "${SENTRY_PROJECT_NAME:-}" && -n "${RENDER_GIT_COMMIT:-}" ]]; then
npx @sentry/cli --auth-token="${SENTRY_API_KEY}" releases --org="${SENTRY_ORG}" --project="${SENTRY_PROJECT_NAME}" files "${RENDER_GIT_COMMIT}" upload-sourcemaps "./frontend/webpack_bundles/" --url-prefix "~/static/webpack_bundles/" --rewrite
rm -f "./frontend/webpack_bundles/"*.js.map
fi
>>>>>>> REPLACE
</suggested_fix>
### Comment 2
<location> `webpack.config.js:49` </location>
<code_context>
- "css-loader",
- // Compiles Sass to CSS
- "sass-loader",
+ { loader: "css-loader", options: { importLoaders: 1 } },
+ // Tailwind v4 uses @tailwindcss/postcss (condigured in the postcss.config.mjs file)
+ "postcss-loader",
</code_context>
<issue_to_address>
Setting 'importLoaders: 1' ensures imported CSS is processed by postcss-loader.
This adjustment is required for proper handling of CSS imports with postcss plugins like Tailwind.
</issue_to_address>
<suggested_fix>
<<<<<<< SEARCH
{ loader: "css-loader", options: { importLoaders: 1 } },
// Tailwind v4 uses @tailwindcss/postcss (condigured in the postcss.config.mjs file)
"postcss-loader",
=======
{
loader: "css-loader",
options: { importLoaders: 1 }
},
// Tailwind v4 uses @tailwindcss/postcss (configured in the postcss.config.mjs file)
{
loader: "postcss-loader"
},
>>>>>>> REPLACE
</suggested_fix>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
raisiqueira
reviewed
Sep 2, 2025
| @@ -4,7 +4,8 @@ import { createRoot } from "react-dom/client"; | |||
|
|
|||
| import App from "./App"; | |||
|
|
|||
| import "../sass/style.scss"; | |||
| import "../css/tailwind.css"; | |||
There was a problem hiding this comment.
Question: Why not merge these two styles into just one?
@import "tailwindcss";
#django-background {
color: #092e20;
font-size: 11pt;
background-repeat: no-repeat;
background-size: auto 200px;
background-position: center;
height: 300px;
background-image: url('../assets/images/django-logo-positive.png');
}
#django-logo-wrapper {
color: #092e20;
& > img {
width: 100px;
}
margin-bottom: 1em;
}There was a problem hiding this comment.
No strong reason. I can merge without any problems. The idea was to show that we can have custom styles in one place and Taiwind's customizations in another. What's your suggestion?
There was a problem hiding this comment.
I prefer to merge them. Generally, on Tailwindcss environments, the customization is close to the components (CSS modules, or even inline class names).
For example, in a component like Button.jsx, I'd define custom styles directly in a CSS module or use Tailwind's @apply directive inline, keeping everything co-located. Otherwise, we can just use inline className="..."
There was a problem hiding this comment.
yep, in general should be inline with className to follow Tailwind convetions
I think all those values could be inline styles with className using Tailwind utility classes
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This pull request updates the boilerplate by migrating from
Bootstrap 5toTailwind CSS v4and removingSasssupport, simplifying the frontend stack.Additionally, it includes minor fixes related to the deployment process on
Render, ensuring smoother and more reliable builds.Motivation and Context
The main goal of this change is to modernize and streamline our boilerplate.
Screenshots (if appropriate):
You can access the live version here:
https://new-styling.onrender.com/
Since the deployment was done on free instances, the application may be sleeping, so it may take some time to become available.
Steps to reproduce (if appropriate):
SECRET_KEYvalue manually. The documentation was updated to explain this step. You can generate a new secret key by running:python -c "from django.core.management.utils import get_random_secret_key; print(get_random_secret_key())"Types of changes
Checklist:
Closes #672
Summary by Sourcery
Modernize the boilerplate by migrating the frontend from Bootstrap and Sass to Tailwind CSS v4, simplify asset handling, and improve deployment reliability on Render
New Features:
Bug Fixes:
Enhancements:
Documentation: