tailwind.config.js

/** @type {import('tailwindcss').Config} */
const colors = require("./src/style/colors");
const {fontScale, hairlineWidth, platformSelect} = require('nativewind/theme');

const scaledFontSize = (remSize) => fontScale(remSize * 14) + '';
module.exports = {
    // NOTE: Update this to include the paths to all of your component files.
    content: ["./src/**/*.{js,jsx,ts,tsx}"],
    presets: [require("nativewind/preset")],
    theme: {
        colors,
        extend: {
            letterSpacing: {
                headline: '0.02em',
            },
            fontSize: {
                // for smaller text, we use line-height 1.2, similar to TailwindCSS defaults
                xs: [scaledFontSize(0.75), {lineHeight: 1.2}],
                sm: [scaledFontSize(0.875), {lineHeight: 1.2}],
                base: [scaledFontSize(1), {lineHeight: 1.2}],
                lg: [scaledFontSize(1.125), {lineHeight: 1.2}],
                xl: [scaledFontSize(1.25), {lineHeight: 1.2}],
                '2xl': [scaledFontSize(1.5), {lineHeight: 1.2}],
                '3xl': [scaledFontSize(1.875), {lineHeight: 1.2}],
                // for headline sizes, we use line-height 1.2
                '4xl': [scaledFontSize(2.25), {lineHeight: 1.2}],
                '5xl': [scaledFontSize(3), {lineHeight: 1.2}],
                '6xl': [scaledFontSize(3.75), {lineHeight: 1.2}],
                '7xl': [scaledFontSize(4.5), {lineHeight: 1.2}],
                '8xl': [scaledFontSize(6), {lineHeight: 1.2}],
                '9xl': [scaledFontSize(8), {lineHeight: 1.2}],
            },
            borderWidth: {
                hairline: hairlineWidth(),
            },
            boxShadow: {
                'android': '0 4px 6px -1px rgb(0, 0, 0 / 1%), 0 2px 4px -2px rgb(0, 0, 0 / 1%)',
                'ios': '0 4px 6px -1px rgba(0, 0, 0, 10%), 0 2px 4px -2px rgba(0, 0, 0, 10%)',
            },
            keyframes: {
                'shake-x': {
                    '0%, 100%': {transform: 'translateX(0px)'},
                    '20%': {transform: 'translateX(-4px)'},
                    '40%': {transform: 'translateX(4px)'},
                    '60%': {transform: 'translateX(-3px)'},
                    '80%': {transform: 'translateX(3px)'},
                },
            },
            animation: {
                'shake-x': 'shake-x 1s ease-in-out',
            },
        },
    },
    plugins: [],
};