End to End React with Prisma 2

Start at the beginning and work your way through this project. The code for each step as well as the finished project can be found in the Github repository.


    16. Add Tailwindcss

    Objective: Add the base tailwind packages for styling our UI.

    First let's install the tailwinds npm package.

    npm install tailwindcss

    Next let's create the base index.css file. We actually won't be doing any styling in it, but we need to import tailwinds in that file.

    styles/index.css

    css

    @tailwind base;
    @tailwind components;
    @tailwind utilities;

    Now let's import it into the _app.tsx

    pages/_app.tsx

    tsx

    import { ApolloProvider } from '@apollo/client'
    import { useApollo } from '../utils/apolloClient'
    import '../styles/index.css'
    export default function App({ Component, pageProps }) {
    const apolloClient = useApollo(pageProps.initialApolloState)
    return (
    <ApolloProvider client={apolloClient}>
    <Component {...pageProps} />
    </ApolloProvider>
    )
    }

    Let's head over to http://localhost:3000 and we'll see that not much has changed! We need to use postcss to allow tailwinds to be properly injected into our application. First let's install postcss:

    npm install --save-dev postcss-preset-env

    Next, we create a config file for postcss and use tailwindcss and autoprefixer.

    postcss.config.js

    js

    module.exports = {
    plugins: ['tailwindcss', 'autoprefixer'],
    }

    After this restart your next.js server by pressing ctrl+c in the terminal and run npm run dev to start it back up. You should see that the font changes slightly but to test this more clearly add className="p-10" to the paragraph tag in pages/index.tsx and we should see that the paragraph gets popped into the page. Revert back that padding once you are sure that tailwinds is loaded.

    The final step we will do is add the @tailwindcss/ui package. We will use this to add pop up modal functionality during the delete button step.

    npm install @tailwindcss/ui

    We then have to load the plugin by adding a tailwind.config.js file.

    tailwind.config.js

    js

    module.exports = {
    purge: [],
    theme: {
    extend: {},
    },
    variants: {},
    plugins: [require('@tailwindcss/ui')],
    }