# Setting up Tailwind CSS In a Phoenix application
In the previous article, we explored setting up a basic Phoenix application. If you haven't read the first part yet, [Just take a moment to read it](https://manju.dev/creating-phoenix-application) before this post :-).
However, if you already have an existing phoenix application running, and if you would like to configure Tailwind with it, skip the first part.
### Preamble
### Install & Configure Tailwind Plugin
Let me be DRY, and not going to repeat what's been documented quite nicely by the [Tailwind official website on how to set up Tailwind CSS in a Phoenix project.](https://tailwindcss.com/docs/guides/phoenix) Steps are elegantly explained.
[via GIPHY](https://giphy.com/gifs/l0ExbnGIX9sMFS7PG)
Re-run the application. At this point, It looks like
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1672437207837/78b72c30-6860-4c9b-a506-6bb917d1965c.png align="center")
I know it looks ugly :-). That completes the first part of this article. In the following section, let's beautify the application to make it look nice.
### Theme your application
Let's create a simple page which uses tailwind.
Look for `lib/docker_phoenix_tailwind_web/templates/layout/root.html.heex` file and replace it with
```xml
<%= csrf_meta_tag() %>
<%= live_title_tag assigns[:page_title] || "", suffix: " ยท Micheal Schumacher" %>
<%= @inner_content %>
```
And look for our content page which is `lib/docker_phoenix_tailwind_web/templates/page/index.html.heex` and replace it with, which contains a simple layout
```xml
Phoenix Framework
Content goes here....
```
This is how my `assets/css/app.css` looks like
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
background-color: crimson;
}
```
And my theme `assets/tailwind.config.js`
```css
// See the Tailwind configuration guide for advanced usage
// https://tailwindcss.com/docs/configuration
let plugin = require('tailwindcss/plugin')
module.exports = {
content: [
'./js/**/*.js',
'../lib/*_web.ex',
'../lib/*_web/**/*.*ex'
],
mode: 'jit',
theme: {
extend: {},
},
plugins: [
require('@tailwindcss/forms'),
plugin(({addVariant}) => addVariant('phx-no-feedback', ['&.phx-no-feedback', '.phx-no-feedback &'])),
plugin(({addVariant}) => addVariant('phx-click-loading', ['&.phx-click-loading', '.phx-click-loading &'])),
plugin(({addVariant}) => addVariant('phx-submit-loading', ['&.phx-submit-loading', '.phx-submit-loading &'])),
plugin(({addVariant}) => addVariant('phx-change-loading', ['&.phx-change-loading', '.phx-change-loading &']))
]
}
```
With that, Re-run the application and you will have a simple tailwind themed page.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1672439916304/982399f9-24ab-4869-8ebb-3f722802204e.png align="center")
Please leave a comment if you happen to face any issues configuring Tailwind.
In the next section, we will explore running the [**Phoenix application locally with a production release build**](https://manju.dev/dockerize-phoenix-tailwind-application), so that we could use the same instructions to build our Dockerfile.