Skip to main content
Version: v2

Ignite

1. Add NativeWind​

You will need to install both nativewind and tailwindcss

tailwindcss is not used during runtime so it can be added as a development dependency.

npm install nativewind
npm install --save-dev tailwindcss@3.3.2
caution

NativeWind does not work with TailwindCSS >3.3.2. If you wish to use the most current version, please upgrade to NativeWind v4

2. Setup Tailwind CSS​

Run npx tailwindcss init to create a tailwind.config.js file

Add the paths to all of your component files in your tailwind.config.js file.

// tailwind.config.js

module.exports = {
- content: [],
+ content: ["./app/components.{js,jsx,ts,tsx}", "./ignite/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. Add the Babel plugin​

Modify your babel.config.js

// babel.config.js
module.exports = {
- plugins: [],
+ plugins: ["nativewind/babel"],
};