I am looking into ways of how I can integrate Tailwind CSS into ionic react application, I have tried this but fell into a dead end, I am aware of the the Next.JS and Tailwind CSS starter created by one of the ionic experts but also inspecting that even I fell into a dead end.
Any help is much appreciated.
Hi, did you get anywhere with this, I’d like to do the same but not sure how to configure it at the moment?
Not really, I am still looking into ways of doing it
This is the closest thing I could find, if this is any help to you
Thanks, I’ve seen that and it looks like it is the solution at the moment. I don’t see any reason not to use that instead of ionic directly. It does everything I need to to for creating apps with ionic, tailwind and capacitor.
Same stuck on this - I’d like to use Tailwind CSS without NextJS
I cannot give you React specifics, but I followed this Angular post to add it to my Vue Ionic app along with Tailwind’s installation documentation.
main.ts
/* Core CSS required for Ionic components to work properly */
import '@ionic/vue/css/core.css'
import 'tailwindcss/base.css'
/* Basic CSS for apps built with Ionic */
// import '@ionic/vue/css/normalize.css';
import '@ionic/vue/css/structure.css'
import '@ionic/vue/css/typography.css'
import 'tailwindcss/components.css'
/* Optional CSS utils that can be commented out */
// import '@ionic/vue/css/padding.css';
// import '@ionic/vue/css/float-elements.css';
// import '@ionic/vue/css/text-alignment.css';
// import '@ionic/vue/css/text-transformation.css';
// import '@ionic/vue/css/flex-utils.css';
// import '@ionic/vue/css/display.css';
import 'tailwindcss/utilities.css'
/* Theme variables */
import './theme/variables.css'
import './theme/styles.css'
tailwind.config.js
module.exports = {
purge: [
'./src/**/*.html',
'./src/**/*.vue',
'./src/**/*.ts',
],
darkMode: false, // or 'media' or 'class'
theme: {
screens: {
'sm': '576px',
'md': '768px',
'lg': '992px',
'xl': '1200px',
},
colors: {
primary: {
default: 'var(--ion-color-primary)',
contrast: 'var(--ion-color-primary-contrast)',
shade: 'var(--ion-color-primary-shade)',
tint: 'var(--ion-color-primary-tint)',
},
secondary: {
default: 'var(--ion-color-secondary)',
contrast: 'var(--ion-color-secondary-contrast)',
shade: 'var(--ion-color-secondary-shade)',
tint: 'var(--ion-color-secondary-tint)',
},
tertiary: {
default: 'var(--ion-color-tertiary)',
contrast: 'var(--ion-color-tertiary-contrast)',
shade: 'var(--ion-color-tertiary-shade)',
tint: 'var(--ion-color-tertiary-tint)',
},
light: {
default: 'var(--ion-color-light)',
contrast: 'var(--ion-color-light-contrast)',
shade: 'var(--ion-color-light-shade)',
tint: 'var(--ion-color-light-tint)',
},
medium: {
default: 'var(--ion-color-medium)',
contrast: 'var(--ion-color-medium-contrast)',
shade: 'var(--ion-color-medium-shade)',
tint: 'var(--ion-color-medium-tint)',
},
dark: {
default: 'var(--ion-color-dark)',
contrast: 'var(--ion-color-dark-contrast)',
shade: 'var(--ion-color-dark-shade)',
tint: 'var(--ion-color-dark-tint)',
},
success: {
default: 'var(--ion-color-success)',
contrast: 'var(--ion-color-success-contrast)',
shade: 'var(--ion-color-success-shade)',
tint: 'var(--ion-color-success-tint)',
},
warning: {
default: 'var(--ion-color-warning)',
contrast: 'var(--ion-color-warning-contrast)',
shade: 'var(--ion-color-warning-shade)',
tint: 'var(--ion-color-warning-tint)',
},
danger: {
default: 'var(--ion-color-danger)',
contrast: 'var(--ion-color-danger-contrast)',
shade: 'var(--ion-color-danger-shade)',
tint: 'var(--ion-color-danger-tint)',
},
step: {
'50': 'var(--ion-color-step-50)',
'100': 'var(--ion-color-step-100)',
'150': 'var(--ion-color-step-150)',
'200': 'var(--ion-color-step-200)',
'250': 'var(--ion-color-step-250)',
'300': 'var(--ion-color-step-300)',
'350': 'var(--ion-color-step-350)',
'400': 'var(--ion-color-step-400)',
'450': 'var(--ion-color-step-450)',
'500': 'var(--ion-color-step-500)',
'550': 'var(--ion-color-step-550)',
'600': 'var(--ion-color-step-600)',
'650': 'var(--ion-color-step-650)',
'700': 'var(--ion-color-step-700)',
'750': 'var(--ion-color-step-750)',
'800': 'var(--ion-color-step-800)',
'850': 'var(--ion-color-step-850)',
'900': 'var(--ion-color-step-900)',
'950': 'var(--ion-color-step-950)',
},
}
}
}
postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
Forgot to mention, any where I need to set a Ionic component CSS Custom Property within my Vue component, I do the following:
<style scoped>
ion-item {
--background: theme('colors.light.tint');
}
</style>
This allows me to not have to hardcode colors and such. Everything is tied back to my general theme. theme() is a Tailwind function - see here.
I have managed to do this now. Follow the instructions for using Tailwindcss with create-react-app.
Then you’re basically using npm and npx scripts to build etc, e.g:
npm run start - serve your app.
npm run build - build your app
npx cap add android - set up a platform
npx cap copy - copy build over to the platforms
This is working fine for me. I’m not sure what the ionic cli is giving you doing it this way, or if this is any different from starting with CRA in the first place. However, you do get the scaffolding that ionic CLI provides.
Just install tailwind as your normally would with create react app, in the App.tsx remove all the css imports except the ionic core and you’re good to go. Hope this helps.
In case somebody still looking for a working solution on
'How to add Tailwindcss to Ionic 6 + Vuejs 3’
Here’s how I did it:
Install Tailwindcss , Postcss and AutoPrefixer (latest versions)
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
Generate the Tailwind and post CSS configuration files.
npx tailwindcss init -p
This will create two files in your root directory: tailwind.config.js and postcss.config.js. :
//File: tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
theme: {
extend: {}
},
plugins: [],
}
Next, create a folder called “styles”, and within that folder, create an entry CSS file (tailwind.css):
mkdir src/styles && touch src/styles/tailwind.css
We’ll import tailwind’s styles using the @tailwind directive within our entry CSS file.
/* ./src/styles/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
Finally, import your entry CSS file in your entry Javascript file(main.ts):
import { createApp } from 'vue'
import App from './App.vue'
import router from './router';
import { IonicVue } from '@ionic/vue';
/* TailwindCSS */
import './styles/tailwind.css';
/* Core CSS required for Ionic components to work properly */
import '@ionic/vue/css/core.css';
...
Restart your development server and you can use Tailwindcss in your project.
Enjoy it!
Don’t forget this in your tailwind.config.js, or you’ll get nowhere…
content: [
'src/**/*.vue',
],
I wrote an article on how this can be done in ionic 7 and React here